waveurfer.js-使它在Firefox以外的浏览器中运行
[英]wavesurfer.js - getting it to work in browsers other than Firefox
问题描述
我正在寻找具有波形的html5音频和视频播放器。 我找到了waveurfer.js，但是看起来就像音频。 但是，嘿，我以为我会玩弄它。 这是一些非常简单的代码（这只是我的桌面上有一个html文件-并且wav已转换为PCM。不过，我已经尝试过使用wav和mp3进行此操作）：
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.7/wavesurfer.min.js"></script>
<script>
var wavesurfer = Object.create(WaveSurfer);
document.addEventListener('DOMContentLoaded', function () {
wavesurfer.init({
container: '#waveform',
waveColor: '#A8DBA8',
progressColor: '#3B8686'
});
wavesurfer.load('session.wav');
});
wavesurfer.on('ready', function () {
wavesurfer.play();
});
</script>
</head>
<body>
<div id="waveform"></div>
</body>
</html>
这再简单不过了！ 好的，让我们在Firefox中打开它：
大！ 开始播放。 我有一个波形。 真棒！
现在，Chrome（或Edge-两者都一样）：
绝对没有（ 划伤头部 ）。 没有声音。 没有。
好的，我在这里找到了此链接： https : //wavesurfer-js.org/example/audio-element/
它说：如果不支持Web Audio，wavesurfer.js将自动回退到HTML5 Media。 但是，您可以选择手动使用音频元素。 只需将后端选项设置为“ MediaElement”
如果不进行谷歌搜索（请听我先跳到这里！），我想我不知道HTML 5 Media和Web Audio之间的确切区别。 还是我的假设是Web Audio意味着HTML 5 Audio标签，它与HTML 5 Media有何不同？ 尚未确定。 我什么都不知道。
无论如何，我将更改上面发布的代码，并将一行代码添加到init函数中：
wavesurfer.init({
container: '#waveform',
waveColor: '#A8DBA8',
progressColor: '#3B8686',
backend: 'MediaElement'
});
现在在Chrome中运行，我得到：
它播放。 但是没有波形。
我的意思是，我使用Chrome浏览器访问了waveurfer.js网站，所有演示均正常工作。 我不明白 最重要的是，我担心使用'MediaElement'后端属性强制执行操作。
我想念什么？
编辑：哦，天哪。 我使用了相同的html5.html文件（不带后端“ MediaElement”属性）和session.wav文件，并将它们放在Web服务器（IIS）上。 现在，我正在通过Web服务器而不是在本地桌面上获取页面。 可以在Edge和Chrome（和Opera）中工作（也可以尝试！）-没问题。 必须是Chrome和Edge不喜欢的本地工作方式。 我将保持此问题的开放状态-绿色的复选标记正在等待添加有价值信息的人！
1 个解决方案
解决方案1
2 已采纳 2017-07-18 20:36:03
Chrome（为了维护更好的涉及文件系统访问的安全性）阻止动态加载文件协议中的任何内容。 这里（以及为什么这既是一个好主意还是一个坏主意的深入讨论）在这里被引用：
https://bugs.chromium.org/p/chromium/issues/detail?id=47416
我个人最喜欢的报价是这句话（过去我一直是这个人）：
关于安全性，您的本地文件策略是“头等大事”，我敦促您重新考虑，请不要陷入使浏览器如此安全以至于不再有用或无法使用的陷阱。 允许用户通过简单的选项选择来决定，就像Microsoft一样，或者上帝帮我决定另一个黄色的条形。
您可以通过使用命令行参数--allow-file-access-from-files启动Chrome或通过（如您所知）启动网络服务器来禁用此功能，如果您想要更简单的服务器，我建议使用Python的SimpleHTTPServer您可以通过键入python -m SimpleHTTPServer 8000 （在任何版本的Python中都是标准配置）从任何目录（在Windows，Mac OSX和Linux中）启动
使WaveSurfer.js在Ionic 3中工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.