html5中audio的简单介绍

html5的audio功能上已经非常强大，回放，跳转，缓冲等以前只能用flash才能实现的功能，html5的audio都能轻松搞定

最近的一个项目使用到了这个功能，把我使用的情况写下来，供大家参考, 因为我需要的功能很简单，所以做的不复杂，如果要使用更多的功能，可以参考下面的api，能实现很多高大上的功能

audio 相关的 api

<audio src=”音频的地址”>备用（当浏览器不支持audio时显示的内容）</audio>

控制函数功能说明

load() 加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载
play() 加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放
pause() 暂停处于播放状态的音频、视频文件

audio 的只读媒体特性有：

只读属性属性说明

duration 获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN（与 JavaScript 中其他的值不同，NaN不能通过相等操作符（== 和 ===）来判断，因为 NaN == NaN 和 NaN === NaN 都会返回 false。因此，isNaN (testValue)就很有必要了）
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的简单介绍相关推荐

html嵌入audio格式不支持,html5中audio支持音频格式的解决方法
HTML5 Audio标签能够支持wav, mp3, ogg, acc, webm等格式,但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持.不是所有的浏览器都支持MP ...
HTML5 autofocus属性用法简单介绍
本章节简单介绍一下HTML5中新增的一个属性autofocus,它可以让一个元素加载后获取焦点,在此之前一般要通过使用javascript的focus()方法实现我们的要求,非常的简单,代码如下: 1 ...
django中使用celery简单介绍
链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载. 本章节我们重点在于实现,如何存储任务的结果. 我们将任务函数改为: from celery_demo.celery im ...
html5中audio播放器标签属性整理
html5中audio播放器标签属性整理 HTML5 元素 audio播放器隐藏 audio标签控制函数功能说明 audio 可脚本控制的特性值只读属性属性说明 HTML5 元素元素是一个 HTM ...
html5中audio标签
html5的audio功能上已经非常强大,回放,跳转,缓冲等以前只能用flash才能实现的功能,html5的audio都能轻松搞定最近的一个项目使用到了这个功能,把我使用的情况写下来,供大家参考, ...
WCF中绑定的简单介绍
绑定基本概念绑定就是一个从通用基础类型派生出来的运行时类型.绑定中描述了传输协议,消息编码格式和其他的一些用于通信的通信协议. 绑定的种类介绍类型名配置文件使用名描述 BasicHttpBin ...
Java中的GC简单介绍
文章目录一.GC是什么? 二.为什么要GC? 三.怎么GC? 一.GC是什么? GC英文全称为Garbage Collection,即垃圾回收. Java中的GC就是对内存的GC. Java的内存管 ...
java中的List简单介绍
List是Java中比较常用的集合类,关于List接口有很多实现类,本文就来简单介绍下其中几个重点的实现ArrayList.LinkedList和Vector之间的关系和区别. List 是一个接口, ...
chrome浏览器中F12的简单介绍
Chrome开发者工具中主要使用的四个功能页面: 元素(Elements).控制台(Console).源代码(Sources).网络(Network) 1.元素(Elements) 用于查看或修改HT ...

html5中audio的简单介绍

html5中audio的简单介绍相关推荐

最新文章

热门文章