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以外的瀏覽器中工作

回答

相關問題