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

我正在寻找一个具有波形的html5音频和视频播放器。我发现了波浪冲击.js，但看起来就像音频。但是，嘿，我想我会玩它。wavesrurfer.js - 让它在Firefox以外的浏览器中工作

<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>

这couldn” - 这是一些非常简单的代码（这只是我和我的桌面上的HTML文件和WAV转化为PCM虽然，我已经与WAV和MP3试过这种）没什么更简单的！好吧，让我们在Firefox中打开此：

太好了！它开始播放。我有一个波形。真棒！

现在Chrome浏览器（或边缘 - 都做同样的）：

绝对没有（划痕头）。没有声音。没有。

OK，我发现这个链接在这里：https://wavesurfer-js.org/example/audio-element/

它说：wavesurfer.js会自动退回到HTML5媒体如果不支持网络音频。但是，您可以选择手动使用音频元素。只需将后端选项设置为“MediaElement”

如果没有使用Google搜索（请先听一下我跳进游泳池脚！），我想我不知道HTML 5 Media和Web Audio之间的确切区别。或者我的假设是我的头脑是Web Audio，意思是HTML 5 Audio标签，它不同于HTML 5 Media How？尚未确定。我什么都不知道。

无论如何，我会改变我的代码张贴以上和一行代码添加到初始化函数：

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不喜欢的本地工作。我会留下这个问题 - 绿色复选标记等待那个增加宝贵信息的人！

来源

2017-07-18 JustLooking

我可能错了，因为我还没有在Firefox中测试过这段时间，但我知道特别是Chrome只允许在https中使用Web Audio API。协议出于安全原因。你可以打开开发者控制台（就像你应该总是尽职尽责，然后发布堆栈溢出问题），看看在测试'file：'时是否存在Chrome中引发的安全异常？ –

另外，刚刚注意到你的隐含问题之一。 Web Audio API允许访问和操作声音文件的二进制数据，无论是流媒体还是静态。 HTML5 Media API允许您使用'

当我输入这个问题，并将图片上传到tinypic时，我的脑海中闪烁着一丝光芒：我想知道它是否与本地工作有关（文件:)。而且，我的臀部是正确的。所以这是文件：这是问题。不是https :.作为已经完成了更多Visual Studio开发的人员......我需要习惯使用浏览器中的开发人员工具！好点子。这是Chrome错误：XMLHttpRequest无法加载file：/// C：/Users/me/Desktop/session.wav。协议方案仅支持跨源请求：http，data，chrome，chrome-extension，https。 – JustLooking

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

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

我个人最喜欢的名言是这样的一个（我已经这样了这家伙过去）：

Your local file policy is 'over the top' as regards security and I urge you to reconsider, please don't fall into the trap of making your browser so secure that it ceases to be useful or usable. Allow the user to decide as Microsoft do with a simple option choice or, God help me, another yellow bar.

您可以通过命令行参数--allow-file-access-from-files或通过启动浏览器（如你发现了），只是旋转了一个Web服务器，如果你想要一种更简单的服务器，我建议Python的SimpleHTTPServer禁用此你可以从任何目录开始（在Windows，Mac OSX和Linux中） ping python -m SimpleHTTPServer 8000（它带有任何版本的Python）

来源

2017-07-18 20:36:03

哈！令人敬畏的报价。 IIRC，他们没有一个命令行标志或什么，'--disable-web-security'？还是他们也删除了？ –

伙计，真棒。我偶然发现了这一点（认为这与本地工作有关）。但是你的真棒解释解释了这是为什么。我喜欢你添加了SimpleHTTPServer信息。太好了！ – JustLooking

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

回答

相关问题