「MediaElementAudioSource輸出零由於CORS訪問限制」，而加載本地MP3文件

我知道有很多相似的線程查詢同樣的問題，但我的電腦正在加載本地存儲的MP3文件。網站沒有託管，我完全在離線設置。「MediaElementAudioSource輸出零由於CORS訪問限制」，而加載本地MP3文件

我下面貼在下面創建一個音頻分析儀教程：http://www.developphp.com/video/JavaScript/Analyser-Bars-Animation-HTML-Audio-API-Tutorial

我已經改變了過時的WebKit功能。 crossOrigin =「anonymous」不起作用，我認爲它不相關，因爲我的文件是在本地託管的。 將crossOrigin設置爲「anonymouse」可消除錯誤，但播放按鈕呈灰色。沒有腳本錯誤，只是標題中概述的CORS訪問問題。下面是完整的javascript：https://jsfiddle.net/kshatriiya/p8u5h3dz/

var audio = new Audio(); 
audio.src = 'track1.mp3'; 
audio.controls = true; 
audio.loop = true; 
audio.autoplay = true; 
// Establish all variables that your Analyser will use 
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height; 
// Initialize the MP3 player after the page loads all of its HTML into the window 
window.addEventListener("load", initMp3Player, false); 
function initMp3Player(){ 
    document.getElementById('audio_box').appendChild(audio); 
    context = new webkitAudioContext(); // AudioContext object instance 
    analyser = context.createAnalyser(); // AnalyserNode method 
    canvas = document.getElementById('analyser_render'); 
    ctx = canvas.getContext('2d'); 
    // Re-route audio playback into the processing graph of the AudioContext 
    source = context.createMediaElementSource(audio); 
    source.connect(analyser); 
    analyser.connect(context.destination); 
    frameLooper(); 
} 
// frameLooper() animates any style of graphics you wish to the audio frequency 
// Looping at the default frame rate that the browser provides(approx. 60 FPS) 
function frameLooper(){ 
    window.webkitRequestAnimationFrame(frameLooper); 
    fbc_array = new Uint8Array(analyser.frequencyBinCount); 
    analyser.getByteFrequencyData(fbc_array); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas 
    ctx.fillStyle = '#00CCFF'; // Color of the bars 
    bars = 100; 
    for (var i = 0; i < bars; i++) { 
     bar_x = i * 3; 
     bar_width = 2; 
     bar_height = -(fbc_array[i]/2); 
     // fillRect(x, y, width, height) // Explanation of the parameters below 
     ctx.fillRect(bar_x, canvas.height, bar_width, bar_height); 
    } 
}

來源

2017-01-15 kshatriiya

你能顯示你的標記嗎？ – vvtx

@vvtx當然，這裏是jsfiddle，我還沒有加載一個曲目，雖然該文件是我的高清：https://jsfiddle.net/kshatriiya/p8u5h3dz/ – kshatriiya

下載您的瀏覽器解決CORS插件，如果你是刨這只是@本地工作。否則，我們需要看到你的HTML來幫助你，因爲JS似乎工作正常。

來源

2017-01-15 18:08:16

我已經添加JSfiddle，也許你可以加載一個軌道上:)我打算最終主辦該網站，所以我不會離線工作。 – kshatriiya

我目前在手機上，我將在稍後從我的筆記本電腦中查看JSfiddle。如果你正在從本地運行文件...然後只是我不知道爲什麼有CORS。它可能來自別的東西。小心查看源代碼並檢查瀏覽器的控制檯是否存在其他問題。 –

網站沒有託管，我完全在離線設置工作。

大多數瀏覽器將所有file: URI視爲不同的來源。對此你沒有太多可以做的事情。

我計劃最終主辦的網站，所以我不會總是脫機

現在就做這方面的工作。這是你如何解決問題。安裝本地Web服務器並將其用於開發。

來源

2017-01-15 18:11:09 Quentin

「MediaElementAudioSource輸出零由於CORS訪問限制」，而加載本地MP3文件

回答

相關問題