HTML5开发,audio 控制,当单个音频播放的时候,其它音频保持暂停状态,避免重音

//html部分
<audio controls src="http://sc1.111ttt.com/2016/1/12/09/205090905133.mp3"></audio>
<audio controls src="http://sc1.111ttt.com/2016/5/12/09/205090518581.mp3"></audio>
<audio controls src="http://sc1.111ttt.com/2016/5/12/09/205090518581.mp3"></audio>

//js 部分//当音频播放按钮被触发的时候
$(‘audio‘).on(‘play‘,function(){
    //这里的索引是1开始的所以要减一
    var thisIndex = $(this).index()-1;
    for( var i = 0 , len = $(‘audio‘).length ; i < len ; i ++ ){
        //如果是当前这个音频播放,那么就跳过,其它音频全部暂停
        if ( thisIndex != i ) {
            $(‘audio‘)[i].pause();
        }
    }
})

  

时间: 2024-11-05 15:53:29

HTML5开发,audio 控制,当单个音频播放的时候,其它音频保持暂停状态,避免重音的相关文章

HTML5之audio实战,网页音乐播放器开发

今天我们就基于 HTML5 audio  来,开发一个网页音乐播放器. 在HTML5 新特性中,audio .video 是我们比较关心的 新 元素,我们终于可以脱离 Flash ,来开发音频.视频播放器了,对于 一个HTML 新元素,无非就是 属性.事件 .方法等等,关于audio 的具体的属性.事件 .方法,请谷歌. 看我们的HTML代码: audio.html <!DOCTYPE html> <html> <head> <meta charset="

HTML5使用Audio标签实现音乐的播放与暂停

最近工作中遇见音乐列表并点击试听,可以试听与暂停的效果.其实HTML5实现这个功能还是很简单的. 首先在网页中嵌入音乐的外链 <a href="javascript:void(0);" onclick="music.changeClass(this,'media');" class="btn btn-green" data-id="edit_btn" data-width="440" data-hei

iOS开发之音频播放、录音

iOS的音频播放可以分为短音频播放(例如:音效等点缀音频)和长音频播放(例:音乐等主音频).前者不需要对进度.循环等进行控制,而后者需要精确的控制.在iOS中播放这两种音频分别使用AudioToolbox.framework和AVFoundation.framework来完成. 短音频音效 AudioToolbox.framework是一套基于C语言的框架,使用它来播放音效其本质是将短音频注册到系统声音服务(System Sound Service).System Sound Service是一

使用HTML5的Audio标签打造WEB音频播放器

目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览器升级诸如Adobe Flash.Apple QuickTime等播放插件,只需使用现代浏览器就可以聆听任何可以发出声音的WEB网站. WEB中的Audio标签 HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中:<audio>标签.使用audio标签可以控制音频的播放与停

[转载]html5 audio音频播放全解析——html5系列

序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在听音乐看视频唯一的办法就是用flash意思是当你没有给浏览器装载Flash插件的话 那么音乐视频即是空谈,html5 audio的出现改变了这一格局,因为你可以不用Flash插件就可以听音乐看视频,当然这些能否实现还跟你用的浏览器有关. 这是demo地址 http://www.feman.cn/h5/audio.html 在手机上浏览效果会更好 文章结构 1

html5 audio音频播放全解析

序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给浏览器装载Flash插件的话 那么音乐视频即是空谈,html5 audio的出现改变了这一格局,因为你可以不用Flash插件就可以听音乐看视频,当然这些能否实现还跟你用的浏览器有关. 这是demo地址 http://www.feman.cn/h5/audio.html(IE8以下不支持) 在手机上浏

关于HTML5中audio音频播放器的一些理解

最近由于工作需要音频,了解到了HTML5中新兴的audio音频播放器.关于它本身的自带的属性不过多介绍,但是需要着重提到的就是它自身就有play()和pause()两个函数可以拿来直接使用,也就是我们经常遇到的播放和暂停功能.下面是我写的实例,有兴趣的朋友可以下载附件观看.今天晚上能把这个问题搞出来,基本上HTML5中audio的一些常见,常用的需求都可以解决了.开心- <!DOCTYPE HTML> <html> <head> <meta charset=&qu

利用html5标签audio在不同客户端下适配播放音频

//声明:ios系统不支持falsh,故而采用各平台支持的html5 audio标签 <script> //创建audio标签 var audio = document.createElement("audio"); //增加audio 属性id audio.id = "audio"; //设置播放文件路径 audio.src = "sound/music.mp3"; //设置是否循环播放 audio.loop = "loo

CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件

CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件 原因略. 解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Settings\guo\Local Settings\Application Data\Google\Chrome\Application\24.0.1312.57的下面有一个文件ffmpegsumo.dll. 复制出来,替换掉CEF3的同名文件.就好了.