我想使用 wavesurfer 为数字音频文件添加时间线.js不幸的是我这里的代码不起作用。我可以知道我可以从哪里加载文件的时间线.js吗?冲浪者时间线插件是否被弃用?
<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 实例传递给其create
函数。您将其传递到密钥Spectrum
下 - 这就是找不到它的原因。将时间线初始化代码更改为:
// ...
timeline.init({
wavesurfer: Spectrum,
container: "#wave-timeline"
});
// ...