简单谈谈如何利用h5实现音频的播放

作者：⽩狼 出处：本⽂版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在⽂章页⾯明显位置给出原⽂连接，否则保留追究法律责任的权利。

如何在⽹页上进⾏⾳频的播放？话题挺⾼⼤上，实际上的开发⼯作确实⾮常easy，只需要利⽤html5的⼀个标签audio即可。⽹页上⼤多数⾳频⼀般是通过插件falsh播放的。但是，并不是所有的浏览器对其都⽀持。html5 规定了通过audio元素来包含⾳频的标准⽅法。

当前audio⽀持的⾳频格式以及具体细节，可参考w3c标准。本⽂我们来看看具体实现以及⼀些有处理。我们⾸先做⼀个简单的实现，播放单个语⾳。//html

播放语⾳

　　//javascript

$(\".audio\").on(\"click\function () { var $this = $(this),

$audio = $this.find(\"audio\"); $audio.get(0).play();});

对，你没有看错，就是这么简单。

但是，想象⼀下我们现在的场景就是类似微信的聊天页⾯，⼀个页⾯⼤概有多个播放语⾳的按钮，还⽤上⾯的代码实现，你可以播放⼀下试试看。

效果不出所料的话所点击的⾳频会同时进⾏播放。

这显然不是我们所要的。我们⽬前的实现⽅法是标记⼀个播放状态，播放任意⼀个⾳频之前判断该状态，如果该状态显⽰正在播放，只需要将其暂停，然后再播放新的⾳频即可。我们来看看具体实现。

var playing = false, currentAudio = null;$(\".audio\").on(\"click\function () { var $audio = $(this).find(\"audio\"); if (playing) {

playing = false;

currentAudio.pause();

currentAudio.currentTime = 0; currentAudio = null; }

playing = true;

currentAudio = $audio.get(0); currentAudio.play();});

这次就如愿了，在多⾳频的状态下实现了播放单个⾳频不冲突的问题了。问题总是那么多，尖锐的⽭盾也随之⽽来。

打开firebug，我们切换到Network栏看看，实际上我们的多个⾳频在页⾯上也是进⾏了加载，这样⽤户打开我们的⽹页就会⾮常耗时，在⽹络不好的情况下效果估计会更差。

我们来看看如何在不影响效果的前提下进⾏优化。①、我们对audio进⾏了优化，实际的播放地址⽤属性存储②、如此的话我们就有必要简单的修改下javascript代码即可来看看具体实现