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.