个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我想使用 wavesurfer.js 添加数字音频文件的时间线，不幸的是我的代码不起作用。我可以知道从哪里可以加载我的文件的timeline.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未定义。
最佳答案
时间线插件要求您将 wavesurfer 实例传递给其 create 函数。您正在将其传递到键 Spectrum 下 - 这就是它无法找到的原因。将时间线初始化代码更改为:
// ...
timeline.init({
wavesurfer: Spectrum,
container: "#wave-timeline"
});
// ...
关于javascript - Wavesurfer 时间轴插件下载已被弃用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47049455/
28
4
0
我是一名优秀的程序员,十分优秀！