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

作者：白狼 出处：http://www.manks.top/article/h5_audio本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

如何在网页上进行音频的播放？话题挺高大上，实际上的开发工作确实非常easy，只需要利用html5的一个标签audio即可。

网页上大多数音频一般是通过插件falsh播放的。但是，并不是所有的浏览器对其都支持。

html5 规定了通过audio元素来包含音频的标准方法。

当前audio支持的音频格式以及具体细节，可参考w3c标准。本文我们来看看具体实现以及一些有处理。

我们首先做一个简单的实现，播放单个语音。

//html

<button class="btn audio">
    播放语音
    <audio src="音频地址"></audio>
</button>

　　

//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代码即可

来看看具体实现

//html

<button class="btn audio">
    播放语音
    <audio data-src="音频地址"></audio>
</button>
<button class="btn audio">
    播放语音
    <audio data-src="音频地址"></audio>
</button>

 

//javascript

var playing = false, currentAudio = null;
$(".audio").on("click", function () {
    var $audio = $(this).find("audio");
    $audio.attr("src", $audio.data("src"));
    if (playing) {
        playing = false;
        currentAudio.pause();
        currentAudio.currentTime = 0;
        currentAudio = null;
    }
    playing = true;
    currentAudio = $audio.get(0);
    currentAudio.play();
});

 

简单吧，我们只增加了一行代码 $audio.attr("src", $audio.data("src")); 对于要播放的我们在点击后才去加载。

我们打开firebug-Network验证下，确实是点击后才进行加载，这样就达到我们优化的效果了。

有小伙伴想问了，我想实现像百度mp3的播放那样，有播放倒计时。因为不属于我们本文主题，具体细节实现可参考w3caudio属性currentTime即可