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的详细使用的更多相关文章

  1. HTML5中 audio标签的样式修改

    由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,那么要怎么改变这个样式呢,其实它的原理比 ...

  2. html5中audio支持音频格式

    HTML5 Audio标签能够支持wav, mp3, ogg, acc, webm等格式,但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持.不是所有的浏览器都支持MP ...

  3. 关于HTML5中audio标签在手机中的autoplay

    这个问题是我最头疼的: 问题描述:在开发手机网页的时候,苹果和三星的一些浏览器不能自动开始播放 解决办法:在这个页面上弹出一个层来触发audio标签的play()方法,或者你还可以 谷歌一下----& ...

  4. 关于谷歌浏览器不支持html5中audio的autoplay解决方法(js代码解决)

    当我们直接写autoplay时,在chrome中浏览器并没有自动播放音频: 如果直接通过js来调用audio的play()方法也不行: 控制台还会报错 大概意思:play()调用失败,因为用户没有与文 ...

  5. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

  6. ios vue2.0使用html5中的audio标签不能播放音乐

    我写了一个M端播放音乐的组件,使用html5的audio标签 然后我使用watch监测currentSong 在浏览器中看到audio渲染的如下: 单独访问渲染出来的audio中url可以播放音乐,为 ...

  7. HTML5中<template>标签的详细介绍

    HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一.HTML5 templa ...

  8. # 详细了解HTML5中的form表单

    4.规范使用 <form>元素用于组织所有表单部件(也称为控件或字段),负责告诉浏览器把数据提交到哪里,方法是在action属性中提供一个URL.加入你只是想在客户端使用JavaScrip ...

  9. html5,audio音乐播放器

    最终,做了自己原来一直想要实现的事儿.得出的结果是,有些事儿一旦開始做了,那么它就并非非常难. 如今的我,正听着自己的播放器放出的<光辉岁月>写这篇周六清晨的博文.写的不是非常好.但也请各 ...

随机推荐

  1. mybatis-generator生成逆向工程两种方式

    本文博客地址:http://blog.csdn.net/soonfly/article/details/64499423 逆向工程下载 链接:https://pan.baidu.com/s/1YOAq ...

  2. 使用gprof2dot和graphivz生成程序运行调用图

    使用gprof2dot和graphivz生成程序运行调用图 gprof2dot是一个将gprof生成的输出转换为dot脚本的工具.通过给定一个gprof的输出文件,将其转换为生成程序调用图的dot脚本 ...

  3. 转:Ogre源代码浅析——脚本及其解析(一)

    Ogre的许多外部资源数据都有着相应的脚本格式,现例举如下: Material(材质):Ogre使用的是“大材质”的概念.狭义的“材质”概念往往是与“贴图”等概念区分开的,比如在Lambert光照模型 ...

  4. android使用GestureDetector实现手势下滑关闭页面的效果。

    实现类似Android风云直播手机端注册登录页,当手势向下滑动的时候,关闭页面的效果. 使用GestureDetector来实现这个效果,当手势在屏幕上面滑动的时候 ,会掉用onFling方法,所以, ...

  5. java节假日api--关于节假日想到的

    http://goseek.cn/index.php. 跟一园友讨论节假日问题得之一网址...涨姿势...(仅限中国节假日) http://api.goseek.cn/ 另一网友整理了测试类: htt ...

  6. 推荐系统排序(Ranking)评价指标

      一.准确率(Precision)和召回率(Recall)  (令R(u)是根据用户在训练集上的行为给用户作出的推荐列表,而T(u)是用户在测试集上的行为列表.) 对用户u推荐N个物品(记为R(u) ...

  7. iOS10 CAAnimationDelegate 的简单适配

    1.iOS10中CAAnimationDelegate的警告 原有的工程用xcode8打开编译后,莫名的增加了许多警告,其中关于动画的警告有这样一个,虽然运行后发现并没有什么影响,但还是要探究一下: ...

  8. 修改linux 最大文件限制数 ulimit

    1)修改当前交互终端的limit值 查询当前终端的文件句柄数: ulimit -n 回车,一般的系统默认的1024. 修改文件句柄数为65535,ulimit -n 65535.此时系统的文件句柄数为 ...

  9. 为什么现在很多年轻人愿意来北上广深打拼,即使过得异常艰苦,远离亲人,仍然义无反顾? 谈谈程序员返回家乡的创业问题 利基市场就是那些不大不小的缝隙中的市场 马斯洛的需求无层次不适合中国。国人的需求分三个层次——生存、稳定、装逼。对应的,国内的产品也分三个层次——便宜、好用、装B。人们愿意为这些掏钱

    信念.思考.行动-谈谈程序员返回家乡的创业问题 昨天晚上在微博上看了篇 <为什么现在很多年轻人愿意来北上广深打拼,即使过得异常艰苦,远离亲人,仍然义无反顾?>,有些话想说. 感觉很多人的担 ...

  10. dll版本兼容

    <runtime> <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1"> <depen ...