" MediaElementAudioSource由于CORS访问限制而输出零"在加载本地mp3文件时

时间:2017-01-15 17:57:09

标签: javascript

我知道有很多类似的线程在询问同样的问题,但我的是在我的计算机上加载一个本地存储的mp3文件。网站未托管,我完全脱机设置。

我按照下面发布的教程创建了一个音频分析器:http://www.developphp.com/video/JavaScript/Analyser-Bars-Animation-HTML-Audio-API-Tutorial

我已经更改了已弃用的webkit函数。 crossOrigin ="匿名"不起作用,我不认为它是相关的,因为我的文件是在本地托管的。 将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);
    }
}

1 个答案:

答案 0 :(得分:0)

  

网站未托管,我完全在线下设置。

大多数浏览器将所有td %>% group_by(Type) %>% group_by(MinValue2 = min(Value2[Value1==min(Value1)]), add=TRUE) %>% summarise_each(funs(min, mean), Value1:Value2) %>% select(-Value2_min) URI视为具有不同来源。你无能为力。

  

我计划最终托管网站,所以我不会一直在线下工作

现在就这样做。这是你如何解决问题。安装本地Web服务器并将其用于开发。