HTML5Audio对象

你不需要理会<audio>元素。HTML 5 允许您直接访问Audio对象：

var snd = new Audio("file.wav"); // buffers automatically when created
snd.play();

当前版本的规范不支持混合。

要多次播放相同的声音，请创建Audio对象的多个实例。您也可以snd.currentTime=0在对象播放完毕后对其进行设置。

由于 JS 构造函数不支持回退<source>元素，您应该使用

(new Audio()).canPlayType("audio/ogg; codecs=vorbis")

测试浏览器是否支持Ogg Vorbis。

如果您正在编写游戏或音乐应用程序（不仅仅是播放器），您将需要使用更高级的 Web Audio API，现在大多数浏览器都支持该API。

W3C 的WebAudio API

截至 2012 年 7 月，Chrome 现在支持WebAudio API，Firefox 至少部分支持，并计划从第 6 版开始添加到 IOS。

尽管它足够健壮，可以以编程方式用于基本任务，但 Audio 元素从未打算为游戏等提供完整的音频支持。它旨在允许将单个媒体嵌入页面中，类似于 img标签。尝试在游戏中使用 Audio 标签有很多问题：

• 时间间隔在音频元素中很常见
• 每个声音实例都需要一个 Audio 元素
• 加载事件并不完全可靠，但
• 没有常见的音量控制，没有衰落，没有过滤器/效果

我使用WebAudio 入门这篇文章开始使用 WebAudio API。该炮塔防御WebAudio案例也很好看。

咆哮.js

对于游戏创作，最好的解决方案之一是使用一个库来解决我们在为 Web 编写代码时面临的许多问题，例如howler.js。howler.js 将伟大（但低级）的Web Audio API抽象为一个易于使用的框架。如果 Web 音频 API 不可用，它将尝试回退到HTML5 音频元素。

var sound = new Howl({
  urls: ['sound.mp3', 'sound.ogg']
}).play();
// it also provides calls for spatial/3d audio effects (most browsers)
sound.pos3d(0.1,0.3,0.5);

wad.js

另一个很棒的库是wad.js，它对于制作合成音频特别有用，例如音乐和效果。例如：

var saw = new Wad({source : 'sawtooth'})
saw.play({
    volume  : 0.8,
    wait    : 0,     // Time in seconds between calling play() and actually triggering the note.
    loop    : false, // This overrides the value for loop on the constructor, if it was set. 
    pitch   : 'A4',  // A4 is 440 hertz.
    label   : 'A',   // A label that identifies this note.
    env     : {hold : 9001},
    panning : [1, -1, 10],
    filter  : {frequency : 900},
    delay   : {delayTime : .8}
})

游戏音效

另一个类似于 Wad.js 的库是“ Sound for Games ”，它更侧重于效果制作，同时通过相对独特（或许更简洁的感觉）API 提供一组相似的功能：

function shootSound() {
  soundEffect(
    1046.5,           //frequency
    0,                //attack
    0.3,              //decay
    "sawtooth",       //waveform
    1,                //Volume
    -0.8,             //pan
    0,                //wait before playing
    1200,             //pitch bend amount
    false,            //reverse bend
    0,                //random pitch range
    25,               //dissonance
    [0.2, 0.2, 2000], //echo array: [delay, feedback, filter]
    undefined         //reverb array: [duration, decay, reverse?]
  );
}

概括

这些库中的每一个都值得一看，无论您是需要播放单个声音文件，还是创建自己的基于 html 的音乐编辑器、效果生成器或视频游戏。

在某些情况下，您可能还想使用它来检测 HTML 5 音频：

http://diveintohtml5.ep.io/everything.html

HTML 5 JS 检测功能

function supportsAudio()
{
    var a = document.createElement('audio'); 
    return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
}

这是一种可以同时播放相同声音的方法。结合预加载器，一切就绪。这至少适用于 Firefox 17.0.1，还没有用其他任何东西对其进行测试。

// collection of sounds that are playing
var playing={};
// collection of sounds
var sounds={step:"knock.ogg",throw:"swing.ogg"};

// function that is used to play sounds
function player(x)
{
    var a,b;
    b=new Date();
    a=x+b.getTime();
    playing[a]=new Audio(sounds[x]);
    // with this we prevent playing-object from becoming a memory-monster:
    playing[a].onended=function(){delete playing[a]};
    playing[a].play();
}

将此绑定到键盘键，并享受：

player("step");