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>

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

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

两者都不会起作用。有人能够找出为什么浪漫主义者不会合作吗？

Answer 1

首先，您需要将Wavesurfer.js包含在您的文档中。然后你应该在文档中有任何容器（你选择'容器'属性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 此外，waveurfer-js网站的包含脚本也有错误。

<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无法在本地或从服务器加载

1 个答案: