audio音频
html5的audio功能上已经非常强大,回放,跳转,缓冲等以前只能用flash才能实现的功能,html5的audio都能轻松搞定
最近的一个项目使用到了这个功能,把我使用的情况写下来,供大家参考, 因为我需要的功能很简单,所以做的不复杂,如果要使用更多的功能,可以参考下面的api,能实现很多高大上的功能
audio 相关的 api
<audio src=”音频的地址”>备用(当浏览器不支持audio时显示的内容)</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都支持。
<div id="audioControl">
<div class="play">
<span id="play">Play</span>
</div>
</div> <audio id="media" src="test.mp3"></audio>
var media = $('#media')[0];
var audioTimer = null;
//绑定播放暂停控制
$('.play').bind('click', function() {
playAudio();
});
//播放暂停切换
function playAudio() {
if(media.paused) {
play();
} else {
pause();
}
}
//播放
function play() {
media.play();
$('#play').html('Pause');
}
//暂停
function pause() {
media.pause();
$('#play').html('Play');
}
原链接:http://blog.csdn.net/alongken2005/article/details/44569981
audio音频的更多相关文章
- html5 audio音频播放全解析
序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...
- [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext
引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...
- HTML5 学习07——Video(视频)Audio(音频)
<video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...
- iphone在微信中audio 音频无法自动播放
问题: Html5的audio 音频在电脑端和android端都可以实现自动播放,在iphone上无法实现,下面针对的是微信浏览器里面的解决方法 html代码: <div id="au ...
- H5 <audio> 音频标签自定义样式修改以及添加播放控制事件
H5 <audio> 音频标签自定义样式修改以及添加播放控制事件 Dandelion_drq 关注 2017.08.28 14:48* 字数 331 阅读 2902评论 3喜欢 3 说明: ...
- HTML5: HTML5 Audio(音频)
ylbtech-HTML5: HTML5 Audio(音频) 1.返回顶部 1. HTML5 Audio(音频) HTML5 提供了播放音频文件的标准. 互联网上的音频 直到现在,仍然不存在一项旨在网 ...
- js获取html5 audio 音频时长方法
<audio src="我的好兄弟.mp3" controls="controls" id="audio" style=" ...
- HTML5 - 使用JavaScript控制<audio>音频的播放
有时我们需要使用js来控制播放器实现音乐的播放,暂停.或者使用js播放一些音效. 1,通过JavaScript控制页面上的播放器 比如把页面上添加一个<audio>用来播放背景音乐(由 ...
- 【HTML5】audio音频
当前,audio 元素支持三种音频格式: IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis √ √ √ MP3 √ ...
- html5 的<audio> 音频 audio的“坑”
<audio>标签是html5的一个非常有意义的特性.告别的flash的时代.它的属性有: autoplay:音频就绪后马上播放 controls:出现该属性,向用户显示播放的控件. lo ...
随机推荐
- jQuery笔记——选择器
jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确的选择,并且不必担心浏览器的兼容性 常规选择器 根据id选择元素就是 ...
- http响应chunked格式分析
有的时候服务器生成HTTP回应是无法确定信息大小的,这时用Content-Length就无法事先写入长度,而需要实时生成消息长度,这时服务器一般采用Chunked编码. 在进行Chunked编码传输时 ...
- python----python使用mysql
Python操作MySQL主要使用两种方式: 原生模块 pymsql ORM框架 SQLAchemy pymql pymsql是Python中操作MySQL的模块,在windows中的安装: pip ...
- export LD_LIBRARY_PATH 的使用
对linux不是很熟,之前只是听说过可以设置程序共享库位置也就是 使用 “export LD_LIBRARY_PATH” 今天用了用,感觉还挺不错,也很常用. 比如你编译了一个so 而这个so 同时又 ...
- SpringMVC总结四:拦截器简单介绍
首先要说一下HandlerExecutionChain: HandlerExecutionChain是一个执行链,当用户的请求到达DispatcherServlet的时候,DispatcherServ ...
- Lucene Payload 的研究与应用
Payload (元数据) 诞生于 Lucene 的2.2 版本,它是在 Lucene 2.1 索引文件格式的基础上扩展而来,提供了一种可以灵活配置的高级索引技术,在某些特定应用场景下能优化基于 Lu ...
- codeforces:Roads in the Kingdom分析和实现
题目大意:国家有n个城市,还有n条道路,每条道路连通两个不同的城市,n条道路使得所有n个城市相互连通.现在国家经费不足,要关闭一条道路.国家的不便度定义为国家中任意两个不同的城市之间的距离的最大值,那 ...
- std:: lower_bound std:: upper_bound
std:: lower_bound 该函数返回范围内第一个不小于(大于或等于)指定val的值.如果序列中的值都小于val,则返回last.序列应该已经有序! eg: #include <iost ...
- C#实现访问网络共享文件夹
C#实现访问网络共享文件夹,使用 WNetAddConnection2A 和 WNetCancelConnection2A. 在目标服务器建立共享文件夹,建立访问账号test; public enum ...
- java方法学习记录
---恢复内容开始--- 方法重载:两个方法有相同的名字,但参数不同,就是方法重载,且不能仅仅依据修饰符或者返回类型的不同来重载方法. 命令行参数的使用 有时候你希望运行一个程序时候再传递给它消息.这 ...