HTML5 <Audio>标签API整理(一)-白红宇

HTML5 <Audio>标签API整理(一)

阅读量：6343 次

发布时间：2019-06-22

本文共 3445 字，大约阅读时间需要 11 分钟。

简单实例：

Api说明：

1.如果需要显示缓存进度，可以参考：

2.不能控制音频的二进制数据，如果需要处理二进制音频数据，参考

只读属性duration ---获取媒体文件的播放时长，以s为单位，如果无法获取则为NaN，当触发canplay事件后就可以获取当前总长度startTime---返回起始播放时间，一般是0.0,除非是缓冲过的媒体文件，并一部分内容已经不再缓冲区(此属性好像已经不可用)paused-----判断是否已经暂停，返回true/falseended-----判断是否已经播放完毕，返回true/falseerror----在发生了错误后，返回错误代码currentSrc --以字符串的形式发挥正在播放或已经加载的文件，对应浏览器在source元素中选择的文件 buffered---获取当前缓冲区大小，返回TimeRanges对象，可控制属性src----指定音频的文件位置autoplay---是否自动播放preload----是否预加载loop------是否循环播放controls----显示或隐藏用户控制界面autobuffer---媒体文件播放前是否进行缓冲加载，如果设置了autoplay，则忽略此特性(此属性好像已经不可用)muted------设置是否静音volume ----在0.0到1.0间的音量值，或查询当前音量值currentTime--以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置方法load() ---加载音频、视频软件paly() ---播放pause()---暂停canPlayType(obj) ----测试饭后指定指定的Mime类型的文件事件loadstart ---客户端开始请求数据progress----正在播放的时候不停触发，如果暂停不会触发，触发的时间间隔比较大play------play()和autopaly播放时，类似事件onplayingpause-----pause()方法触发时ended-----当结束播放时timeupdate----当前播放时间发生改变的时候，播放中常用的时间处理，如果暂停不会触发，触发的时间间隔比较小canplaythrough---歌曲已经载入完成canplay -----缓冲至可播放状态，类似事件onloadedmetadata onloadedmetadata----当元数据（比如分辨率和时长）被加载时运行的脚本

更多属性

audioTracks----返回表示可用音频滚到的AudioTrackList对象。

controller---返回表示音频大年媒体控制器的MediaController对象。

crossOrigin---设置或返回音频的CORS设置

defaultMuted---设置或返回音频默认是否静音

defaultPlaybackRate---设置或返回音频的默认播放速度

mediaGroup---设置或返回音频叔叔的美肌组合的名称

networkState---返回音频的当前网络状态

playbackRate---设置或返回音频的播放速度。

seekable---返回标识音频可寻址不烦的TimeRanges对象

seeking---返回用户当前收正在音频中进行查找。

textTracks---返回标识文本滚到的TextTrackList对象

更多方法

load()----重新加载音频元素

getStartDate()----返回新的Date对象，表示当前时间线偏移量。

fastSeek()---在音频播放器中指定播放时间。

addTextTrack()----想音频添加新的文本轨道。

更多参考：

实例1：

    
             
      ../content/audio/海阔天空.mp3
        
              
              
              
                  
       音量：

js代码：

var currentFile = '../content/audio/海阔天空.mp3';//判断浏览器是否支持audioif (!window.HTMLAudioElement) {alert('您的浏览器不支持audio标签');} else {var myAudio = document.getElementById('myAudio');//播放/暂停按钮$('#playBtn').click(function () {    var icon = $(this).find('i');    //播放    if (myAudio.paused) {        //如果延迟指定src的话，会在播放前有较长的等待        if (myAudio.src.length <= 0) {            myAudio.src = currentFile;        }        myAudio.play();        icon.removeClass('glyphicon-play').addClass('glyphicon-pause');    } else {        myAudio.pause();        icon.addClass('glyphicon-play').removeClass('glyphicon-pause');    }});//静音按钮$('#mutedBtn').click(function () {    var icon = $(this).find('i');    icon.toggleClass('glyphicon-volume-down').toggleClass('glyphicon-volume-off');    myAudio.muted = !myAudio.muted;});//音量按钮$('#volume').slider({    value: myAudio.volume * 100}).on('change', function (e) {    var value = e.value.newValue / 100;    myAudio.volume = value;});$('#changeBtn').click(function () {    //使用在线文件    myAudio.src = 'http://m5.file.xiami.com/523/78523/1136455538/1774490672_16884267_l.mp3?auth_key=61ade10d6a7508618ab53fe2aaa39b8c-1478919600-0-null';    myAudio.play();});//监听事件myAudio.oncanplay = function () {    console.info('进入可播放状态,音频总长度:' + myAudio.duration);}myAudio.onplay = function () {    console.info('开始播放：' + myAudio.currentTime);}myAudio.onpause = function () {    console.info('暂停播放：' + myAudio.currentTime);}myAudio.onprogress = function () {    //console.info(myAudio.buffered);    //console.info('正在播放：' + myAudio.currentTime);}myAudio.ontimeupdate = function (e) {    console.info('播放时间发生改变：'+myAudio.currentTime);}}

显示结果：