html5中audio的详细使用
来源:互联网 发布:it行业发展方向 编辑:程序博客网 时间:2024/06/16 07:40
html5的audio功能上已经非常强大,回放,跳转,缓冲等以前只能用flash才能实现的功能,html5的audio都能轻松搞定
最近的一个项目使用到了这个功能,把我使用的情况写下来,供大家参考, 因为我需要的功能很简单,所以做的不复杂,如果要使用更多的功能,可以参考下面的api,能实现很多高大上的功能
audio 相关的 api
备用(当浏览器不支持audio时显示的内容)
控制函数功能说明
load() 加载音频、视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载
play() 加载并播放音频、视频文件,除非文件已经暂停在其他位置,否则默认重头开始播放
pause() 暂停处于播放状态的音频、视频文件
audio 的只读媒体特性有:
只读属性属性说明
duration 获取媒体文件的播放时长,以s为单位,如果无法获取,则为NaN
paused 如果媒体文件被暂停,则返回true,否则返回false
ended 如果媒体文件播放完毕,则返回true
startTime 返回起始播放时间,一般是0.0,除非是缓冲过的媒体文件,并一部分内容已经不在缓冲区
error 在发生了错误后返回的错误代码
currentSrc 以字符串形式返回正在播放或已加载的文件,对应于浏览器在source元素中选择的文件
audio 可脚本控制的特性值:
autoplay 自动播放已经加载的的媒体文件,或查询是否已设置为autoplay
loop 将媒体文件设置为循环播放,或查询是否已设置为loop
currentTime 以s为单位返回从开始播放到目前所花的时间,也可设置currentTime的值来跳转到特定位置
controls 显示或者隐藏用户控制界面
volume 在0.0到1.0间设置音量值,或查询当前音量值
muted 设置是否静音
autobuffer 媒体文件播放前是否进行缓冲加载,如果设置了autoplay,则忽略此特性
对于这些属性,主流的浏览器都支持。可是别以为就没有了兼容性,在音频播放流中,有两个阵营。firefox 和 opera 支持 ogg 音频,safari 和 ie 支持 mp3.幸好Google的chrome都支持。
<audio controls="controls" preload="auto"> // preload="auto"设置为预加载的 audio 元素
<div id="audioControl"> <div class="play"> <span id="play">Play</span> </div> </div> <audio id='media'> <source src="song.mp3" type="audio/mpeg"> <source src="song.ogg" type="audio/ogg"> </audio>var media = $('#media')[0]; var audioTimer = null; //绑定播放暂停控制 $('.play').bind('click', function() { playAudio(); }); //播放暂停切换 function playAudio() { if(media.paused) { play(); // 当前的播放,其他的音乐都暂停 for(var i= 0;i<$('audio').length;i++){ if(i!==index){ //index表示当前播放的audio的索引值 $('audio').eq(i)[0].pause(); $('audio').eq(i)[0].currentTime = 0; $('.item .list').eq(i).find('.play').removeClass('on'); } } } else { pause(); } } //播放 function play() { media.play(); $('#play').html('Pause'); } //暂停 function pause() { media.pause(); $('#play').html('Play'); }
- html5中audio的详细使用
- html5中audio的详细使用
- html5 audio的使用
- HTML5 audio标签的使用
- HTML5中Audio标签ended属性的使用
- HTML5中Audio标签的使用与通过JS暂停音乐播放器audio
- HTML5中使用audio元素播放音频
- HTML5中 audio标签的样式修改
- HTML5中 audio标签的样式修改
- HTML5新增标签<audio>简单的使用
- html5新增audio&&video的使用示例
- html5 audio 标签使用
- HTML5 的 Audio 标签
- Html5 audio标签使用详解
- 使用HTML5抓取 Audio & Video
- HTML5 - 使用<audio>播放音频
- HTML5 Audio中控制音乐暂停、播放的js
- html5中audio标签在不同平台下的问题
- 事件冒泡和事件委托的共鸣与相互利用
- debug....
- Java代码复制文件【图片、文档等】
- 疯狂讲义随笔——坐标变换模拟雪花飘落
- 数据在内存中所占的字节数或位数
- html5中audio的详细使用
- Charles的安装与使用说明
- Android日期时间戳比较大小
- php Rc4对接java过程中遇见的坑
- java使用jxl导出excel使用总结
- 关于struct file 结构下 private_data 数据结构z作用
- 浅谈 ACM与泡妞
- nrf51822 app timer简单使用
- 2 python-模块和类