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

您正在使用异步 XMLHttpRequest（请注意，它应拼写为大写字母“H”），因此很可能在playSound之前调用request.onLoad函数（注意：缺少=）完成。

尝试使用console.log或类似方法跟踪脚本的执行情况，以查找此类错误并使用JavaScript控制台捕获语法错误。

Answer 2

你的audioURL是否正确？

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 3

我修复了这个问题:)我使用了音频标签和网络音频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);

试图提供帮助：））

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 方法替换为开始）。

Answer 5

现代ES6的简约方法。

https://stackoverflow.com/a/63501494/9854149

无法自动播放Web Audio API，您需要通过事件来触发

。

基本Web Audio API没有播放mp3文件？

5 个答案: