我该怎么做才能让 canvas 在不同的浏览器中工作

Question

我正在尝试为我的网站制作一个外观漂亮的收音机，并且 chrome（大部分）一切正常。但是此代码在 firefox 或 edge 中不起作用。我相信 canvas 本身可以正常工作，因为我的网页有黑色背景，除了 chrome 以外的所有内容都显示为白色。只是 canvas 没有做任何应该做的事情。

我该如何解决？

以下是与canvas有关的一切。它从 HTML 音频元素中提取歌曲并继续创建音频可视化工具。

代码：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="scripts/radio.css">
</head>

<body>
  <canvas id="canvas"></canvas>
  <p class="songName" id="songName"></p>
  <audio id="playMusic" controls="controls" autoplay="autoplay">
         <source id="source" src="" type="audio/mp3">
         Your browser does not support the audio element.
      </audio>
  <button class="skip" id="skip" style="position: absolute;" onclick="skip()">Skip Song</button>
  <br />
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="scripts/radio.js"></script>
</body>

</html>

Answer 1

我发现了我遇到的问题。空 'src=""' 会导致 edge 和 firefox 出错，但 chrome 不会导致无法加载 canvas.

<source id="source" src="" type="audio/mp3">//Results in an error loading media because there is no source.

我该怎么做才能让 canvas 在不同的浏览器中工作

What can I do to get canvas working in different browsers

canvas

web-audio-api