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音频的更多相关文章

  1. html5 audio音频播放全解析

    序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...

  2. [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext

    引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...

  3. HTML5 学习07——Video(视频)Audio(音频)

    <video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...

  4. iphone在微信中audio 音频无法自动播放

    问题: Html5的audio 音频在电脑端和android端都可以实现自动播放,在iphone上无法实现,下面针对的是微信浏览器里面的解决方法 html代码: <div id="au ...

  5. H5 <audio> 音频标签自定义样式修改以及添加播放控制事件

    H5 <audio> 音频标签自定义样式修改以及添加播放控制事件 Dandelion_drq 关注 2017.08.28 14:48* 字数 331 阅读 2902评论 3喜欢 3 说明: ...

  6. HTML5: HTML5 Audio(音频)

    ylbtech-HTML5: HTML5 Audio(音频) 1.返回顶部 1. HTML5 Audio(音频) HTML5 提供了播放音频文件的标准. 互联网上的音频 直到现在,仍然不存在一项旨在网 ...

  7. js获取html5 audio 音频时长方法

    <audio src="我的好兄弟.mp3" controls="controls"  id="audio" style=" ...

  8. HTML5 - 使用JavaScript控制<audio>音频的播放

    有时我们需要使用js来控制播放器实现音乐的播放,暂停.或者使用js播放一些音效.   1,通过JavaScript控制页面上的播放器 比如把页面上添加一个<audio>用来播放背景音乐(由 ...

  9. 【HTML5】audio音频

    当前,audio 元素支持三种音频格式:   IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis   √ √ √   MP3 √ ...

  10. html5 的<audio> 音频 audio的“坑”

    <audio>标签是html5的一个非常有意义的特性.告别的flash的时代.它的属性有: autoplay:音频就绪后马上播放 controls:出现该属性,向用户显示播放的控件. lo ...

随机推荐

  1. SSD知识

    不管什么接口的SSD,一般都由以下部分组成:主控,Flash,板,壳,品牌.下面本佬就这些部分一一发帖,仅供娱乐参考,不作任何推荐和偏向,有不同见解请直接发表,有任何错误,请直接指正,不为吵架,只为娱 ...

  2. 科学计算工具Numpy简介

    Numpy(Numerical Python) Numpy:提供了一个在Python中做科学计算的基础库,重在数值计算,主要用于多维数组(矩阵)处理的库.用来存储和处理大型矩阵,比Python自身的嵌 ...

  3. Oracle使用split和splitstr函数批量分隔字符串

    /* * Oracle 创建 split 和 splitstr 函数 */ /* 创建一个表类型 */ ) / /* 创建 split 函数 */ CREATE OR REPLACE FUNCTION ...

  4. Asp.NetCore远程自启动、重启、关闭实现

    一.背景 NetCore作为微服务可以注册到服务中心,服务中心可以远程启动.重启.关闭该微服务 二.实现 1.创建一个NetCore 2.0 WebApi项目 2.创建一个进程去管理NetCore程序 ...

  5. (转)CSS布局-负边距-margin

    css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...

  6. c作图-正弦函数图像

    #include<graphics.h>#include<math.h>int main(){    int gmode,gdriver=DETECT; double x1,y ...

  7. java中的 equals 与 ==

    Java中的"=="永远比较的是两个对象是否是同一个对象(引用指向同一块内存就是同一个对象) Java中equals() 在使用必须与类挂上钩,不能单独使用.有的人这样理解&quo ...

  8. 【HDU4307】Matrix

    本篇博客基本全篇转自https://www.cnblogs.com/staginner/archive/2012/08/13/2636826.html,太强啦ORZ 题意 A是个1*n的矩阵,每个元素 ...

  9. jquery 获取url 参数方法 以及 解决url中文问题

    //jQuery 动态给a 标签赋值 跳转 新的页面打开. /* <a class="btn btn-success" id="test" target= ...

  10. 3.Hive中查看数据来源文件和具体位置方法

    虚拟列 -- 当 hive 产生了非预期的或 null 的时候,可以通过虚拟列进行诊断,判断哪行数据出现问题 INPUT__FILE__NAME     (输入文件名)map任务读入File的全路径 ...