简单谈谈如何利用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即可

时间: 2024-10-13 23:25:39

简单谈谈如何利用h5实现音频的播放的相关文章

H5页面音频自动播放问题

最近有这么一个需求,需要在手机加载一个页面的时候,自动播放音乐资源.一般情况下,这个问题也就解决了,但是要保证各种手机上表现一致,那就相当困难了,至少要费点儿周折. 下面有三种常规的方式,可以创建自动播放的audio对象: 第一种:页面上创建一个audio标签,写好相关的属性,如:autoplay='autoplay',正常情况下,这里写上资源地址之后,访问页面之后就可以自动播放了.但是如果音乐资源地址不确定,需要js改变的话,就需要使用JS来实现了. (function() { var aud

js控制H5 audio音频的播放暂停

<body><audio src="b.mp3" controls="controls" preload id="music" hidden></audio><span onclick="control();">播放/暂停</span><span onclick="repeat();">重播</span><script

如何利用H5响应式建站系统做响应式网站

响应式网站成为了企业建站的首选目标,是什么因素导致的呢?我想更多是因为响应式网站的强大展示方式,多元素.多样化.多功能的形态,让网站"活了"起来,还有能够一个网站便能适应所有屏幕设备,不再需要为每一个不一样的设备制定一个特定版本的网站,省去了建站,优化.管理的麻烦.让你更好的统筹管理一个网站,便能在不同设备平台上得到相同的效果. 说起响应式网站,很多人会疑惑.那么好的类型网站,建设起来费用是不是要很高?建设时间是不是很长?错!错!错!其实如果在较早直接做一个响应式网站是要花费高额的开发

简单谈谈编程语言(三)

?????? 本文续上一篇简单谈谈编程语言(二),最后再谈谈编程语言.这篇很有可能是最后一篇了,也是时候整理一下我之前的一些文档了,这篇谈谈对编程语言专精的必要性,或者选择一精多涉猎的战术,谈谈一些学习心路,而,共性,就是我这篇文章表达的核心.第一篇文章谈历史,第二篇文章谈历程,都是第三篇的基础,之后就靠大家自己去实际学习中感受文章中所表达的了. ?????? 经过前两篇对编程语言不同层面的描述,其实大概对编程语言学习的畏惧心理可能已经没有那么大了,也可能也因为编程经验相对少感受不深,也可能因为

简单谈谈JVM中的GC(下)

在系列的最后,简单谈谈一些会有坑的JVM参数配置,以避免大家再多次踩坑 -XX:+DisableExplicitGC 很多的JVM标准配置中都有该选项,那么它究竟是干嘛的? 它会让System.gc()变成一次空调用,并不会真的发生一次Full Gc.除此以外,它还能避免第三方库定时引发的Full Gc(没错,说的就是RMI机制),看来很美好,对不对? 但有一种情况:应用本身GC正常,很久都不会Full Gc,但堆外内存增长很快,并且JVM启用了-XX:+DisableExplicitGC.你就

四舍五入的一些简单写法(利用内置函数,算法2种写法)

?       //内置函数的写法        //网上零售价和折扣价在计算结束需要进行进位,规则如下:         //个位为1,2,3,4进位到5,例如计算后的价格为1201,则价格为1205:         //个位为6,7,8,9进位到0,例如计算后的价格为1209.则价格为1210:         public static string ChangePrice(double price)         {             int changed = 0;     

项目设计之一------简单工厂模式利用

简单工厂模式可以结合反射进行实现,这样的解耦更好 项目设计之一------简单工厂模式利用,布布扣,bubuko.com

iOS开发—音频的播放的简单介绍和封装工具类

iOS开发—音频的播放的简单介绍和封装工具类 一.音效的播放简单介绍 简单来说,音频可以分为2种 (1)音效 又称“短音频”,通常在程序中的播放时长为1~2秒 在应用程序中起到点缀效果,提升整体用户体验 (2)音乐 比如游戏中的“背景音乐”,一般播放时间较长 框架:播放音频需要用到AVFoundation.framework框架 二.音效的播放 1.获得音效文件的路径 NSURL *url = [[NSBundle mainBundle] URLForResource:@"m_03.wav&qu

简单谈谈为什么国内不能登录Facebook/youtube等国外网站以及解决方法

简单谈谈为什么国内不能登录Facebook/youtube等国外网站以及解决方法让我们来简单地回顾一下近几年的互联网,自从Google对微软步步紧逼之后,国外互联网风起云涌,先后出现了Twitter.Facebook.Youtube等超级巨无霸,这些巨大无朋的互联网公司几乎是一夜之间出现在我们眼前.基本上这几家公司都是在2004年左右创办的, 2004年2月,Facebook由哈佛大学的学生Mark Zuckerberg创办,时隔一年,Youtube于2005年2年由Paypal的三个前员工Ch