1

我想使用 wavesurfer.js 为数字音频文件添加时间线，不幸的是我的代码在这里不起作用。我可以知道从哪里可以加载我的文件的时间线.js 吗？wavesurfer 时间线插件是否已弃用？

<html>
    <head>
    <title>webapp</title>


    <!-- main wavesurfer.js lib -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>

    <!-- wavesurfer.js timeline -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/sidebar.css" type="text/css"/>

    </head>
    <body>
<div id="waveform-timeline"></div>    
            <div id="audio-spectrum"></div>
 </body>
    </html>

javascript:

var Spectrum = WaveSurfer.create({
                    container: '#audio-spectrum',
                    progressColor: "#03a9f4",
                    container: document.querySelector('#audio-spectrum'),
                    backend: 'MediaElement'
                });

Spectrum.on('ready', function () {
                   var timeline = Object.create(Spectrum.Timeline);

                       timeline.init({
                       Spectrum: Spectrum,
                       container: "#wave-timeline"
                       });
                     });

                // Load the audio file from your domain !
                Spectrum.load('http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');

错误说 wavesurfer 没有定义。

4

1 回答 1

0

时间线插件要求您将 wavesurfer 实例传递给它的create函数。您在密钥下传递它Spectrum——这就是它找不到的原因。将您的时间线初始化代码更改为：

// ...
timeline.init({
  wavesurfer: Spectrum,
  container: "#wave-timeline"
});
// ...
于 2017-11-06T22:45:01.737 回答