0

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

<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 song = 'audio/song_cjrg_teasdale_64kb.mp3'

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

两者都行不通。有谁能够确定为什么 wavesurfer 不合作？

4

1 回答 1

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 wavesurfer-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>
于 2016-12-08T13:57:24.117 回答