Wavesurfer.js无法从本地或从服务器加载

Question

Would anyone be able to spot the issue here? 有人可以在这里发现问题吗？

<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>

The above code example from the wavesurfer site is working. Wavesurfer网站上的上述代码示例正在运行。 If I intitialize the variable with the SAME mp3 locally: var song = 'audio/song_cjrg_teasdale_64kb.mp3' 如果我在本地使用SAME mp3初始化该变量：var song ='audio / song_cjrg_teasdale_64kb.mp3'

or I initialize the variable from a server: var song = ' http://jamesdoe.byethost9.com/jonikae/audio/song_cjrg_teasdale_64kb.mp3 ' 或者我从服务器初始化变量：var song =' http : //jamesdoe.byethost9.com/jonikae/audio/song_cjrg_teasdale_64kb.mp3 '

neither will work. 两者都不起作用。 Is anyone able to identify why wavesurfer will not cooperate? 有谁能够确定为什么waveurfer无法合作？

Answer 1

First you need to include Wavesurfer.js to your document. 首先，您需要将Wavesurfer.js包含到文档中。 Then you should have any container in document (that you picked to 'container' property WaveSurfer.create({});) Also is important to run script after container initialization (better at the end of document, when container has been created). 然后， 您应该在文档中有任何容器 （选择了“容器”属性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 Also there is a mistake in the include script at the wavesurfer-js website. UPD在waveurfer-js网站上的include脚本中也有一个错误。

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

It should be like this 应该是这样

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

Wavesurfer.js无法从本地或从服务器加载

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-12-08 13:57:24

Wavesurfer.js无法从本地或从服务器加载

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-12-08 13:57:24

解决方案1
1 已采纳 2016-12-08 13:57:24