Question

我正在寻找一个有波形的html5音频和视频播放器。我找到了wavesurfer.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。但是，您可以选择手动使用音频元素。只需将后端选项设置为＆＃34; MediaElement＆＃34;

没有谷歌搜索（听我先在这里跳到游泳池脚！），我想我不知道HTML 5媒体和网络音频之间的确切区别。或者我的假设是我的头脑是Web Audio意味着HTML 5 Audio标签，它与HTML 5 Media不同？还不确定。我一无所知。

无论如何，我将更改上面发布的代码并在init函数中添加一行代码：

wavesurfer.init({
    container: '#waveform',
    waveColor: '#A8DBA8',
    progressColor: '#3B8686',
    backend: 'MediaElement'
});

现在在Chrome中运行，我得到：

播放。但没有波形。

我的意思是，我使用Chrome浏览器和waveurfer.js网站进行了所有演示。我不明白。最重要的是，我担心用“媒体元素”强迫事情发生。后端财产。

我错过了什么？

编辑：哦，为了善良的缘故。我使用了相同的html5.html文件（没有后端＆＃39; MediaElement＆＃39;属性）和session.wav文件，并将它们放在Web服务器（IIS）上。现在，我通过Web服务器获取页面，而不是在本地桌面上工作。适用于Edge和Chrome（以及Opera - 也尝试过！） - 没问题。必须是Chrome和Edge不喜欢的本地工作。我将这个问题保持开放 - 绿色复选标记等待那个添加有价值信息的人！

Answer 1

Chrome（为了保持更好的安全性，涉及文件系统访问），可以阻止动态加载文件协议中的任何内容。这里引用了这个（以及关于为什么这是一个好主意和一个坏主意的深入讨论）：

https://bugs.chromium.org/p/chromium/issues/detail?id=47416

我个人最喜欢的一句就是这个（我过去一直都是这个人）：

您的本地文件策略在安全性方面是“过头”，我建议您重新考虑，请不要陷入使您的浏览器如此安全以至于不再有用或可用的陷阱。允许用户决定微软做一个简单的选项选择，或者，上帝帮助我，另一个黄色条。

您可以通过使用命令行参数--allow-file-access-from-files启动Chrome或通过（如您发现的那样）启动Web服务器来禁用此功能，如果您想要更简单的服务器，我会推荐Python {{3}您可以通过键入python -m SimpleHTTPServer 8000从任何目录（在Windows，Mac OSX和Linux中）开始（它是任何版本的Python的标准配置）

wavesurfer.js - 让它在Firefox以外的浏览器中工作

1 个答案: