如何使画布在不同的浏览器中工作

时间:2019-03-17 21:10:24

标签: canvas web-audio-api

我正在尝试为我的网站制作一个漂亮的收音机,并且一切正常(对于chrome)效果很好。但是此代码不适用于Firefox或Edge。我相信画布本身可以正常工作,因为我的网页背景为黑色,除镀铬外的所有颜色均为白色。只是画布没有做应该做的事情。

该如何解决?

以下是与画布有关的所有内容。它从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>

1 个答案:

答案 0 :(得分:-1)

我已经找到了遇到的问题。 空的'src =“”'会导致edge和firefox错误,但不会导致chrome错误,从而导致无法加载画布。

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