Wavesurfer.js 未在本地或从服务器加载

Question

有人能发现这里的问题吗？

<script>
  var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple'
  });

  var song = 'http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3'
  wavesurfer.load(song);
  wavesurfer.on('ready', function () {wavesurfer.play();});
</script>

来自 wavesurfer 站点的上述代码示例正在运行。如果我在本地使用 SAME mp3 初始化变量： var 歌曲 = 'audio/song_cjrg_teasdale_64kb.mp3'

或者我从服务器初始化变量： var song = 'http://jamesdoe.byethost9.com/jonikae/audio/song_cjrg_teasdale_64kb.mp3'

两者都行不通。有谁能找出 wavesurfer 不合作的原因吗？

Answer 1

首先，您需要将 Wavesurfer.js 添加到您的文档中。然后 你应该在文档 中有任何容器（你选择 'container' 属性 WaveSurfer.create({});）此外 对容器初始化后的运行脚本很重要 （在文档末尾创建容器时更好）。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.0.52/wavesurfer.min.js"></script>
    </head>
    <body>
        <div id="waveform"></div>
    </body>
    <script>
        var wavesurfer = WaveSurfer.create({
             container: '#waveform',
             waveColor: 'violet',
             progressColor: 'purple'
         });

         var song = 'http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3'
         wavesurfer.load(song);
         wavesurfer.on('ready', function () {wavesurfer.play();});
    </script>
</html>

UPD wavesurfer-js 网站上的 include 脚本也有错误。

<scriptsrc="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.0.52/wavesurfer.min.js"></script>

应该是这样的

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.0.52/wavesurfer.min.js"></script>

Wavesurfer.js 未在本地或从服务器加载

Wavesurfer.js not loading locally or from server

javascript

wavesurfer.js