博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html5中audio的详细使用
阅读量:6586 次
发布时间:2019-06-24

本文共 1353 字,大约阅读时间需要 4 分钟。

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

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

 

 相关的  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都支持。

 

 

Play

 

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://pjhno.baihongyu.com/

你可能感兴趣的文章
HTML中IE版本条件注释整理
查看>>
spring boot 1.5.4 整合webService(十五)
查看>>
modsecurity(尚不完善)
查看>>
在mac os中设置环境变量
查看>>
获取.propertys文件获取文件内容
查看>>
Redis3.0.5配置文件详解
查看>>
Keepalived+Nginx实现高可用
查看>>
[转]如何阅读systemstate dump
查看>>
Know about Oracle RAC Heartbeat
查看>>
JQuery——实现Ajax应用
查看>>
前端05.js入门之BOM对象与DOM对象。
查看>>
CISCO路由器NTP服务器配置
查看>>
PMON: TERMINATING INSTANCE DUE TO ERROR 600 on 8i
查看>>
voice lab2 – GK Operations
查看>>
MongoDB MapReduce
查看>>
Nginx学习日记第五篇 -- upstream及fastcgi
查看>>
oracle kill所有plsql developer进程
查看>>
12c rac 实例无法启动之磁盘组空间耗尽
查看>>
Win10右键添加获取管理员权限
查看>>
keepalived双机热备原理及实例部署LVS+keepalived
查看>>