基本Web音頻API不播放MP3文件？

Question

我試圖通過拼湊示例在線跟隨教程。我覺得這應該是播放MP3文件。我使用的是Chrome瀏覽器，並且它是最新的。我沒有在控制檯上發現任何錯誤。我不確定我需要更改或添加這項工作。

<script type="text/javascript"> 

//creating an audio context 

window.addEventListener('load',init); 

function init() 
{ 

    try 
    { 
     window.AudioContext = window.AudioContext || window.webkitAudioContext; 
     var context=new AudioContext(); 

    } 
    catch(e) 
    { 
     alert("Your browser doesn't support Web Audio API"); 
    } 

    loadSound(); 
    playSound(); 
} 

//loading sound into the created audio context 

function loadSound() 
{ 
    //set the audio file's URL 
    var audioURL='audio files/song.mp3'; 

    //creating a new request 
    var request = new XMLhttpRequest(); 
    request.open("GET",audioURL,true); 
    request.responseType= 'arraybuffer'; 
    request.onLoad funtion(){ 

     //take the audio from http request and decode it in an audio buffer 

     var audioBuffer = null; 

     context.decodeAudioData(request.response, function(buffer){ audioBuffer= buffer;}); 

    } 

    request.send(); 

}, onError); 

//playing the audio file 
function playSound(buffer) { 
    //creating source node 
    var source = audioContext.createBufferSource(); 
    //passing in file 
    source.buffer = audioBuffer; 

    //start playing 
    source.start(0); 
} 

</script> 

</head> 


</html> 

Answer 1

我得到這個東西固定:)我一起利用音頻標籤與網絡音頻API。下面的代碼：

var audio = new Audio(); 
audio.src = 'audio files/song.mp3'; 
audio.controls = true; 
audio.autoplay = true; 
document.body.appendChild(audio); 

var context = new webkitAudioContext(); 
var analyser = context.createAnalyser(); 


window.addEventListener('load', function(e) { 
    // Our <audio> element will be the audio source. 
    var source = context.createMediaElementSource(audio); 
    source.connect(analyser); 
    analyser.connect(context.destination); 


}, false); 

thnks試圖幫助:)）

Answer 2

您正在使用異步XMLHttpRequest（請注意，它應該由資本的 「H」 拼寫），所以最有可能playSound函數之前request.onLoad稱爲（注：缺少=）完成。

嘗試使用console.log或類似方法跟蹤腳本的執行情況，以查找類似的錯誤並使用JavaScript控制檯捕獲語法錯誤。

Answer 3

你的音樂庫正確嗎？

audio files/song.mp3爲什麼會有空的空間？

============ ============編輯

<script> 

//creating an audio context 

var context; 
var audioBuffer; 

window.addEventListener('load', init);  

function init() 
{ 

    try 
    { 
     window.AudioContext = window.AudioContext || window.webkitAudioContext; 
     context=new AudioContext(); 

    } 
    catch(e) 
    { 
     alert("Your browser doesn't support Web Audio API"); 
    } 

    loadSound(); 
    // playSound(); // comment here 
} 

//loading sound into the created audio context 
function loadSound() 
{ 
    // set the audio file's URL 
    var audioURL='AllofMe.mp3'; 

    //creating a new request 
    var request = new XMLHttpRequest(); 
    request.open("GET",audioURL,true); 
    request.responseType= 'arraybuffer'; 
    request.onload = function(){ 

     //take the audio from http request and decode it in an audio buffer 
     context.decodeAudioData(request.response, function(buffer){ 
      audioBuffer = buffer; 
      console.log(audioBuffer); 
      if(audioBuffer){ // check here 
      playSound(); 
      } 
     }); 

    }; 

    request.send(); 

} 



//playing the audio file 
function playSound() { 

    //creating source node 
    var source = context.createBufferSource(); 
    //passing in file 
    source.buffer = audioBuffer; 

    //start playing 
    source.connect(context.destination); // added 
    source.start(0); 
    console.log('playing'); 

} 

</script> 

Answer 4

我一直在尋找解決播放mp3在移動設備上，並找到了這個網頁，我做了提供示例工作在here的幫助下。提供下面的工作示例：

var context; 
var saved; 

try { 
    context = new (window.AudioContext || window.webkitAudioContext)(); 
} 
catch (e) { 
    console.log("Your browser doesn't support Web Audio API"); 
} 

if (saved) { 
    playSound(saved); 
} else { 
    loadSound(); 
} 

//loading sound into the created audio context 
function loadSound() { 
    //set the audio file's URL 
    var audioURL = '/path/to/file.mp3'; 

    //creating a new request 
    var request = new XMLHttpRequest(); 
    request.open('GET', audioURL, true); 
    request.responseType = 'arraybuffer'; 
    request.onload = function() { 
     //take the audio from http request and decode it in an audio buffer 
     context.decodeAudioData(request.response, function (buffer) { 
      // save buffer, to not load again 
      saved = buffer; 
      // play sound 
      playSound(buffer); 
     }); 
    }; 
    request.send(); 
} 

//playing the audio file 
function playSound(buffer) { 
    //creating source node 
    var source = context.createBufferSource(); 
    //passing in data 
    source.buffer = buffer; 
    //giving the source which sound to play 
    source.connect(context.destination); 
    //start playing 
    source.start(0); 
} 

它看起來像播放文件在Android設備上工作正常，但不是iOS。爲此，您必須遵循本指南：How to: Web Audio on iOS（但使用touchend事件並替換noteOn方法到開始）。