wavesurfer.js 不會加載本地文件
[英]wavesurfer.js won't load local file
問題描述
我一直在開發一個允許用戶點擊並操作 mp3 文件的在線應用程序，我正在嘗試將本地文件從我的計算機加載到 wavesurfer object 中，但我在 chrome 中不斷收到此錯誤：
“CORS 政策阻止了從原點‘null’訪問位於‘file:///local/file/path/to/audio/files/some.mp3’的 XMLHttpRequest：跨源請求僅支持協議方案：http , 數據, chrome, chrome-extension, https."
我試過將 HTML 和 mp3 文件放在多台計算機上的多個不同文件夾中，但似乎沒有任何效果。 這是我的代碼：
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
<div id="waveform"></div>
<script>
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'darkorange',
progressColor: 'blue',
height: 64,
backend: 'MediaElement'
});
//setRequestHeader('Origin', document.domain);
//wavesurfer.load("http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3");
var song = "clippedJaco.mp3";
wavesurfer.load(song);
wavesurfer.on('ready', function () {wavesurfer.play();});
</script>
</body>
添加“MediaElement”后端時，會加載 mp3，但不會生成任何波形。 非常感謝任何幫助，謝謝！
2 個解決方案
解決方案1
2 2022-04-06 22:46:12
由於您不能從外部源加載資源，出於安全原因，如果您嘗試從非 HTTP 源加載，這可能會很煩人。 有時無法放置迷你 HTTP 服務器或修改瀏覽器標志（不要這樣做，這很危險）來解決這個問題。
我最近偶然發現了這個問題，並在博客（作者 Carlos Delgado）上找到了一個很好的解決方案，它使用 HTML 輸入元素加載本地資源，並使用 JS blob 文件讀取器將這些傳遞給 wavesurfer 代碼。 這是非 jquery 代碼，非常適合我：
// JS:Initialize WaveSurfer var wavesurfer = WaveSurfer.create({ container: '#waveform', }); // Once the user loads a file in the fileinput, the file should be loaded into waveform document.getElementById("fileinput").addEventListener('change', function(e){ var file = this.files[0]; if (file) { var reader = new FileReader(); reader.onload = function (evt) { // Create a Blob providing as first argument a typed array with the file buffer var blob = new window.Blob([new Uint8Array(evt.target.result)]); // Load the blob into Wavesurfer wavesurfer.loadBlob(blob); }; reader.onerror = function (evt) { console.error("An error ocurred reading the file: ", evt); }; // Read File as an ArrayBuffer reader.readAsArrayBuffer(file); } }, false); <script src="https://unpkg.com/wavesurfer.js"></script> <:-- HTML: Initialize a div for WaveSurfer --> <div id="waveform"></div> <!-- Add a file input where the user should drag the file to load into WaveForm --> <input type="file" id="fileinput" />
解決方案2
0 2019-09-04 16:21:33
據我了解，這是因為出於安全原因，瀏覽器限制了從腳本內部發起的跨域HTTP請求。 這意味着使用XMLHttpRequest和Fetch API的Web應用程序只能從加載該應用程序的同一來源請求HTTP資源，除非來自其他來源的響應包括正確的CORS標頭。
來源： 跨域資源共享（CORS）
解決此問題的一種方法是將Web應用程序托管在localhost中。 您可以使用它開始。 然后在index.html文件中調用wavesurfer.js並創建一個要顯示波形的容器。
的index.html
<!doctype html> <!-- You can use this link as well to call wavesurfer.js. This is what's given on their updated documentation--> <!-- <script src="https://unpkg.com/wavesurfer.js"></script> --> <head> <title>Test Website</title> </head> <body> <!-- Adding wavesurfer.js script --> <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script> <h1>Wavesurfer Test</h1> <!-- !-- Create a container where the waveform is to appear--> <div id="waveform"></div> <script src="script/main.js" defer="defer"></script> <script src="script/test.js"></script> </body> </html>
然后添加一個腳本來處理waveurfer實例。 就我而言，這是test.js
test.js
//Creating a wavesurfer instance, passing the container selector along with some options like progress color and wave color var wavesurfer = WaveSurfer.create({ container: '#waveform', waveColor: 'violet', progressColor: 'purple' }); //Loading the audio file you want to play wavesurfer.load('audio/LOVE_s.mp3'); // You can also load wav files if you want //wavesurfer.load('audio/songaudio.wav'); //This is the event you play the wavesurver instance ie when wavesurfer ready event wavesurfer.on('ready', function() { wavesurfer.play(); });
這樣，我就可以輕松地將本地音頻文件加載到waveurfer。 希望這可以幫助。
在電子中打開本地文件並在wavesurfer.js中渲染
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.