html5中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');
}
html5中audio的详细使用的更多相关文章
- HTML5中 audio标签的样式修改
由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,那么要怎么改变这个样式呢,其实它的原理比 ...
- html5中audio支持音频格式
HTML5 Audio标签能够支持wav, mp3, ogg, acc, webm等格式,但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持.不是所有的浏览器都支持MP ...
- 关于HTML5中audio标签在手机中的autoplay
这个问题是我最头疼的: 问题描述:在开发手机网页的时候,苹果和三星的一些浏览器不能自动开始播放 解决办法:在这个页面上弹出一个层来触发audio标签的play()方法,或者你还可以 谷歌一下----& ...
- 关于谷歌浏览器不支持html5中audio的autoplay解决方法(js代码解决)
当我们直接写autoplay时,在chrome中浏览器并没有自动播放音频: 如果直接通过js来调用audio的play()方法也不行: 控制台还会报错 大概意思:play()调用失败,因为用户没有与文 ...
- html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
- ios vue2.0使用html5中的audio标签不能播放音乐
我写了一个M端播放音乐的组件,使用html5的audio标签 然后我使用watch监测currentSong 在浏览器中看到audio渲染的如下: 单独访问渲染出来的audio中url可以播放音乐,为 ...
- HTML5中<template>标签的详细介绍
HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一.HTML5 templa ...
- # 详细了解HTML5中的form表单
4.规范使用 <form>元素用于组织所有表单部件(也称为控件或字段),负责告诉浏览器把数据提交到哪里,方法是在action属性中提供一个URL.加入你只是想在客户端使用JavaScrip ...
- html5,audio音乐播放器
最终,做了自己原来一直想要实现的事儿.得出的结果是,有些事儿一旦開始做了,那么它就并非非常难. 如今的我,正听着自己的播放器放出的<光辉岁月>写这篇周六清晨的博文.写的不是非常好.但也请各 ...
随机推荐
- linux下挂载VHD等虚拟磁盘文件
1.RAW格式虚拟磁盘 linux下可以直接挂载raw格式的虚拟磁盘镜像文件. 例如,这里先用dd命令创建一个文件,然后将其格式化为ext4格式(只有一个分区),然后挂载到/mnt目录. 下面的raw ...
- Linux(centos6.5)下安装jenkins
Jenkins 的前身是 Hudson 是一个可扩展的持续集成引擎. 通俗的来讲,jenkins就是一个可以实现自动化部署的一个插件, 对于我来说,也是应用在系统部署上. 废话不多说,直接进入我们的安 ...
- Linux桌面“彩”起来:桌面环境及窗口管理器大盘点
2011-02-22 11:49:50 看到这个标题,很多人一定认为桌面环境和窗口管理器是一回事,但严格来说窗口管理器和桌面环境是有区别的.桌面环境(Desktop Environments)是最 ...
- java中enum的应用
package com.demo; public enum TestEnum { A("hello"), B("world"); private String ...
- 关于去哪儿网的UI自动化测试脚本
UI自动化测试Qunar机票搜索场景访问Qunar机票首页http://flight.qunar.com,选择“单程”,输入出发.到达城市,选择today+7日后的日期,点“搜索”,跳转到机票单程搜索 ...
- Windows ElasticSearch中文分词配置
elasticsearch官方只提供smartcn这个中文分词插件,效果不是很好,好在国内有medcl大神(国内最早研究es的人之一)写的两个中文分词插件,一个是ik的,一个是mmseg的,下面分别介 ...
- Swift 下标脚本
前言 在访问一个数组实例的元素时,可以使用 Array[index] 的形式.在访问一个字典实例的元素时,可以使用 Dictionary[index] 的形式.这种方括号的形式就是 "下标脚 ...
- Mac Vim 编辑器
1.常用命令 /xxx 查找xxx n 执行上一次查找 0 到行首 w 光标往后移动一个词 b 光标往前移动一个词 x 删除当前一个字符 dw 删除一个单词 D 删除到行尾 dd 删除整行 V 选中整 ...
- Tomcat7并发和线程数
最近一直在解决线上一个问题,表现是: Tomcat每到凌晨会有一个高峰,峰值的并发达到了3000以上,最后的结果是Tomcat线程池满了,日志看很多请求超过了1s. 服务器性能很好,Tomcat版本是 ...
- 【colaboratory】在colab中安装mxnet
在学习<动手学深度学习>内容是,该内容用的是mxnet框架,在电脑本地安装过程中又容易出现错误,怎么也安装不上,所有的条件都尝试了. 汗颜,指的另谋他法. 只有在谷歌的学习平台上安装使用h ...