转载自:http://www.cnblogs.com/tianma3798/p/6033108.html
简单实例:
<audio id="myAudio"></audio><script> var myAudio = document.getElementById('myAudio'); myAudio.src = '../content/audio/海阔天空.mp3'; myAudio.play(); myAudio.loop = true; myAudio.preload = true; myAudio.currentTime</script>
Api 说明:
1. 如果需要显示缓存进度,可以参考:HTML5 Media 事件
2. 不能控制音频的二进制数据,如果需要处理二进制音频数据,参考 HTML5 webAudioAPI 简介 (一)
只读属性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 -----缓冲至可播放状态,类似事件onloadedmetadataonloadedmetadata----当元数据(比如分辨率和时长)被加载时运行的脚本
更多属性
audioTracks---- 返回表示可用音频滚到的 AudioTrackList 对象。
controller--- 返回表示音频大年媒体控制器的 MediaController 对象。
crossOrigin--- 设置或返回音频的 CORS 设置
defaultMuted--- 设置或返回音频默认是否静音
defaultPlaybackRate--- 设置或返回音频的默认播放速度
mediaGroup--- 设置或返回音频叔叔的美肌组合的名称
networkState--- 返回音频的当前网络状态
playbackRate--- 设置或返回音频的播放速度。
seekable--- 返回标识音频可寻址不烦的 TimeRanges 对象
seeking--- 返回用户当前收正在音频中进行查找。
textTracks--- 返回标识文本滚到的 TextTrackList 对象
更多方法
load()---- 重新加载音频元素
getStartDate()---- 返回新的 Date 对象,表示当前时间线偏移量。
fastSeek()--- 在音频播放器中指定播放时间。
addTextTrack()---- 想音频添加新的文本轨道。
更多参考:http://caibaojian.com/html5-audio.html
实例 1:
<style> #volumeSlider .slider-selection { background:#bababa; }</style><div class="container"> <p> ../content/audio/海阔天空.mp3 </p> <button class="btn btn-primary" id="playBtn"> <i class="glyphicon glyphicon-play"> </i> </button> <button class="btn btn-info" id="mutedBtn"> <i class="glyphicon glyphicon-volume-down"> </i> </button> <button class="btn btn-danger" id="changeBtn"> 切换歌曲 </button> <div class="form-group"> <label class="control-label"> 音量: </label> <input class="form-control" id="volume" data-slider-id="volumeSlider" data-slider-min="0" data-slider-max="100" data-slider-step="1" /> </div></div><audio id="myAudio"></audio>
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);}}
显示结果:
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: http://www.92to.com/bangong/2016/12-12/14279992.html