Javascript 基本网络音频API不播放mp3文件？

我试图通过拼凑这些例子来学习在线教程。我觉得这应该是播放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>

//创建音频上下文
addEventListener（'load'，init）；
函数init（）
{
尝试
{
window.AudioContext=window.AudioContext | | window.webkitadiocontext；
var context=新的AudioContext（）；
}
捕获（e）
{
警报（“您的浏览器不支持Web音频API”）；
}
loadSound（）；
播放声音（）；
}
//将声音加载到创建的音频上下文中
函数loadSound（）
{
//设置音频文件的URL
var audioURL='audio files/song.mp3'；
//创建新请求
var request=new XMLhttpRequest（）；
打开（“获取”，音频URL，true）；
request.responseType='arraybuffer'；
request.onLoad函数（）{
//从http请求中获取音频并在音频缓冲区中解码
var audioBuffer=null；
decodeAudioData（request.response，函数（buffer）{audioBuffer=buffer；}）；
}
request.send（）；
}，onError）；
//播放音频文件
功能播放声音（缓冲区）{
//创建源节点
var source=audioContext.createBufferSource（）；
//传递文件
source.buffer=音频缓冲区；
//开始玩
source.start（0）；
}

您使用的是async

XMLHttpRequest

（注意，它应该用大写字母“H”拼写），因此很可能在

请求之前调用
播放声音
函数。onLoad

（注意：缺少

=

）完成

<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>

---

尝试使用

console.log

或类似工具跟踪脚本的执行，以查找类似的错误，并使用JavaScript控制台捕获语法错误。

您的audioURL正确吗

<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>

音频文件/song.mp3

为什么有空白

<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>

================编辑============

<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>

<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>

//创建音频上下文
var语境；
无功音频缓冲器；
addEventListener（'load'，init）；
函数init（）
{
尝试
{
window.AudioContext=window.AudioContext | | window.webkitadiocontext；
上下文=新的AudioContext（）；
}
捕获（e）
{
警报（“您的浏览器不支持Web音频API”）；
}
loadSound（）；
//playSound（）；//此处注释
}
//将声音加载到创建的音频上下文中
函数loadSound（）
{
//设置音频文件的URL
var audioURL='AllofMe.mp3'；
//创建新请求
var request=new XMLHttpRequest（）；
打开（“获取”，音频URL，true）；
request.responseType='arraybuffer'；
request.onload=函数（）{
//从http请求中获取音频并在音频缓冲区中解码
上下文.解码音频数据（请求.响应，函数（缓冲区）{
音频缓冲区=缓冲区；
日志（音频缓冲区）；
如果（音频缓冲区）{//请检查此处
播放声音（）；
}
});
};
request.send（）；
}
//播放音频文件
函数playSound（）{
//创建源节点
var source=context.createBufferSource（）；
//传递文件
source.buffer=音频缓冲区；
//开始玩
source.connect（context.destination）；//已添加
source.start（0）；
console.log（'playing'）；
}

我修复了这个问题：）我使用了音频标签和web音频API。代码如下：

<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>

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);

var audio=新音频（）；
audio.src='audiofiles/song.mp3'；
audio.controls=true；
audio.autoplay=true；
文件.正文.附件（音频）；
var context=新的webkitAudioContext（）；
var analyzer=context.createanalyzer（）；
window.addEventListener（'load'，函数（e）{
//我们的元素将是音频源。
var source=context.createMediaElementSource（音频）；
源。连接（分析仪）；
分析器.连接（上下文.目的地）；
}，假）；

---

感谢您的帮助：）

我正在寻找在移动设备上播放mp3的解决方案，找到了这个页面，我提供了一个示例，可以从中获得帮助。提供以下工作示例：

<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>

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);
}

---

看起来在安卓设备上播放文件效果不错，但在iOS上却不行。为此，您必须遵循本指南：（但使用touchend事件并将noteOn方法替换为开始）。

现代ES6的最低限度方法

<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>

<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>

---

Web Audio API无法自动播放，您需要由事件触发。

我猜上面代码中的一个错误是，我没有将参数传递给playSound（）函数。我纠正了它，现在它看起来像：播放声音（音频缓冲）；但它仍然不起作用（我不确定在

函数loadSound（）

之后如何使用

onError

。是否应该实现它？可能是文件

song。mp3

位于名为

音频文件

的目录中。是的，它位于音频文件目录中。我纠正了您指出的错误。它仍然不起作用：（这是可行的。但是你也可以按照你最初尝试的方式来做。看看@el.pescado的建议。

<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>