为什么我将 MediaElement Source 添加到音乐后没有声音？网络音频 API

Question

我正在尝试使用网络音频 API，因为我希望根据正在播放的音乐制作一些可视化效果。但是我发现的所有示例，就像音频被静音一样。它播放文件，但没有声音。

我知道它需要 CORS，我尝试通过添加 "audio.crossOrigin = 'anonymous'" 来修复。但它不起作用。提前致谢。

这是 link 代码笔：http://codepen.io/lianliu/pen/xwPXvO/?editors=101

$(document).ready(function() {
var audio = new Audio("http://w-labs.at/experiments/audioviz/GYAKO.mp3");
audio.crossOrigin = "anonymous";
var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
//var audioElement = document.getElementById('myAudio');
var audioSrc = audioCtx.createMediaElementSource(audio);
var analyser = audioCtx.createAnalyser();
// Bind our analyser to the media element source.
audioSrc.connect(analyser);
audioSrc.connect(audioCtx.destination);
audio.play();
audio.volume = 0.5;

//var frequencyData = new Uint8Array(analyser.frequencyBinCount);
var frequencyData = new Uint8Array(200);

var svgHeight = '300';
var svgWidth = '1200';
var barPadding = '1';

function createSvg(parent, height, width) {
    return d3.select(parent).append('svg').attr('height', height).attr('width', width);
}

var svg = createSvg('body', svgHeight, svgWidth);

// Create our initial D3 chart.
svg.selectAll('rect')
    .data(frequencyData)
    .enter()
    .append('rect')
    .attr('x', function(d, i) {
        return i * (svgWidth / frequencyData.length);
    })
    .attr('width', svgWidth / frequencyData.length - barPadding);

// Continuously loop and update chart with frequency data.
function renderChart() {
    requestAnimationFrame(renderChart);

    // Copy frequency data to frequencyData array.
    analyser.getByteFrequencyData(frequencyData);

    // Update d3 chart with new data.
    svg.selectAll('rect')
        .data(frequencyData)
        .attr('y', function(d) {
            return svgHeight - d;
        })
        .attr('height', function(d) {
            return d;
        })
        .attr('fill', function(d) {
            return 'rgb(0, 0, ' + d + ')';
        });
}

// Run the loop
renderChart();

});

Answer 1

I know that it entails CORS, and I tried to fix by adding "audio.crossOrigin = 'anonymous'". But it doesn't work.

你走在正确的轨道上。您需要确保您的服务器使用 Access-Control-Allow-Origin header 集提供 mp3。将其设置为您发出请求的特定域，或设置为“*”以从任何地方访问它。

如何设置 header 取决于您使用的服务器软件运行。以下是不同方法的列表：http://enable-cors.org/server.html

编辑：

尝试将 URL 更改为与 header 组合一起提供的 mp3，例如

http://chrome-jam-static.commondatastorage.googleapis.com/sounds/soundlogo_jam.mp3

您会发现您的代码运行良好。

为什么我将 MediaElement Source 添加到音乐后没有声音？网络音频 API

why no sound after I add MediaElement Source to the music? Web Audio API

html

visualization

html5-audio

web-audio-api