爲什麼在將MediaElement Source添加到音樂後沒有聲音？ Web Audio API

Question

我正在嘗試使用Web Audio API，因爲我正在根據正在播放的音樂製作一些可視化對象。然而，我發現的所有例子，就像音頻被靜音。它播放文件，但沒有聲音。

我知道它需要CORS，我試圖通過添加「audio.crossOrigin ='匿名'」來解決。但它不起作用。提前致謝。

這是鏈接到codepen：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

我知道它需要CORS，我試圖通過添加 「audio.crossOrigin ='anonymous'」來解決。但它不起作用。

你在正確的軌道上。您需要確保您的服務器使用Access-Control-Allow-Origin標頭集來提供mp3。將它設置爲您提出請求的特定域，或者設置爲「*」以從任何地方訪問它。

如何設置標題取決於您正在運行的服務器軟件。這裏有不同的方法列表：http://enable-cors.org/server.html

編輯：

嘗試更改URL到被送達頭集MP3，像

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

，你會看到你的代碼工作得很好。