新的项目要在网页端为课程加一个音频播放的功能，H5的audio标签可以满足此功能，并且有丰富的api可供选择。HTML5音频播放器是一种利用现代web技术，特别是HTML5、CSS和JavaScript，为网页构建的媒体播放工具。这种播放器可以支持多种音频格式，如MP3，让网站用户可以直接在浏览器中播放音频内容，无需依赖Flash或其他外部插件。
下面将深入探讨如何使用html5、JAVAScript以及可能涉及到的相关技术来实现一个音频播放器。
audio标签是用来播放音频文件的。支持的格式：
| 音频格式 | MINE-type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
可以在 和 之间放置文本内容，这些文本信息将会被显示在那些不支持 标签的浏览器中。
1.audio对象属性：
| 属性 | 描述 |
|---|---|
| audioTracks | 返回表示可用音频轨道的 AudioTrackList 对象 |
| autoplay | 设置或返回是否在加载完成后随即播放音频 |
| buffered | 返回表示音频已缓冲部分的 TimeRanges 对象 |
| controller | 返回表示音频当前媒体控制器的 MediaController 对象 |
| controls | 设置或返回音频是否显示控件（比如播放/暂停等） |
| crossOrigin | 设置或返回音频的 CORS 设置 |
| currentSrc | 回当前音频的 URL |
| currentTime | 设置或返回音频中的当前播放位置（以秒计） |
| defaultMuted | 设置或返回音频默认是否静音 |
| defaultPlaybackRate | 设置或返回音频的默认播放速度 |
| duration | 返回当前音频的长度（以秒计） |
| ended | 返回音频的播放是否已结束 |
| error | 返回表示音频错误状态的 MediaError 对象 |
| loop | 设置或返回音频是否应在结束时重新播放 |
| mediaGroup | 设置或返回音频所属的组合（用于连接多个音频元素） |
| muted | 设置或返回音频是否静音 |
| networkState | 返回音频的当前网络状态 |
| paused | 设置或返回音频是否暂停 |
| playbackRate | 设置或返回音频播放的速度 |
| played | 返回表示音频已播放部分的 TimeRanges 对象 |
| preload | 设置或返回音频是否应该在页面加载后进行加载 |
| readyState | 返回音频当前的就绪状态 |
| seekable | 返回表示音频可寻址部分的 TimeRanges 对象 |
| seeking | 返回用户是否正在音频中进行查找 |
| src | 设置或返回音频元素的当前来源 |
| textTracks | 返回表示可用文本轨道的 TextTrackList 对象 |
| volume | 设置或返回音频的音量 |
2.Audio 对象方法
| 方法 | 描述 |
|---|---|
| addTextTrack() | 在音频中添加一个新的文本轨道 |
| canPlayType() | 检查浏览器是否可以播放指定的音频类型 |
| fastSeek() | 在音频播放器中指定播放时间。 |
| getStartDate() | 返回一个新的Date对象，表示当前时间轴偏移量 |
| load() | 重新加载音频元素 |
| play() | 开始播放音频 |
| pause() | 暂停当前播放的音频 |
3.Audio对象事件
| 事件 | 描述 |
|---|---|
| abort | 当音频/视频的加载已放弃时触发。 |
| canplay | 当浏览器可以开始播放音频/视频时触发。 |
| canplaythrough | 当浏览器可在不因缓冲而停顿的情况下进行播放时触发。 |
| durationchange | 当音频/视频的时长已更改时触发。 |
| emptied | 当目前的播放列表为空时触发。 |
| ended | 当目前的播放列表已结束时触发。 |
| error | 当在音频/视频加载期间发生错误时触发。 |
| loadeddata | 当浏览器已加载音频/视频的当前帧时触发。 |
| loadedmetadata | 当浏览器已加载音频/视频的元数据时触发。 |
| loadstart | 当浏览器开始查找音频/视频时触发。 |
| pause | 当音频/视频已暂停时触发。 |
| play | 当音频/视频已开始或不再暂停时触发。 |
| playing | 当音频/视频在因缓冲而暂停或停止后已就绪时触发。 |
| progress | 当浏览器正在下载音频/视频时触发。 |
| ratechange | 当音频/视频的播放速度已更改时触发。 |
| seeked | 当用户已移动/跳跃到音频/视频中的新位置时触发。 |
| seeking | 当用户开始移动/跳跃到音频/视频中的新位置时触发。 |
| stalled | 当浏览器尝试获取媒体数据，但数据不可用时触发。 |
| suspend | 当浏览器刻意不获取媒体数据时触发。 |
| timeupdate | 当目前的播放位置已更改时触发。 |
| volumechange | 当音量已更改时触发。 |
| waiting | 当视频由于需要缓冲下一帧而停止时触发。 |
4.简易音频播放器代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>老六博客视频</title> <scrIPt src='../js/JQuery.js'></script> <style> *{margin:0;padding: 0;} /* 主容器样式 */ #box1{ display: flex; width: 600px; height: 500px; flex-direction: column; } /* 音频列表容器样式 */ #audioList{ display: flex; flex-direction: column; width: 600px; height: 400px; } /* 音频信息容器样式 */ #audioInfo{ display: flex; flex-direction: row; justify-content: space-around; align-items: center; width: 600px; height: 50px; } /* 音频控制容器样式 */ #audioContro{ display: flex; flex-direction: row; justify-content: center; align-items: center; width: 600px; height: 50px; } /* 歌曲列表复选框样式 */ #audioList select{ height: 400px; border: 1px solid gray; border-radius: 2%; } /* 进度条样式 */ #audIOSlider{ width: 400px; } /* 图标样式 */ img{ width: 40px; height: 40px; } #audioStata{ display: flex; flex-direction: column; font-size: 10px; } #voiceSlider{ position: absolute; display: none; height: 80px; left: 300px; top: 380px; background-color: red; /* writing-mode: bt-lr; */ -WEBkit-appearance:slider-vertical; } </style> </head> <body> <div id='box1'> <!-- 歌曲列表容器 --> <div id='audioList'> <select id='audioSelect' multiple ></select> </div> <!-- 音频播放标签 --> <audio id='audio1'></audio> <!-- 音频信息容器 --> <div id='audioInfo'> <p id='audioCurTime'>00:00:00</p> <input id="audioSlider" type="range" min="0" max="550" step="1" value="0" /> <p id='audioTolTime'>00:00:00</p> <div id='audioStata'> <p id='voice'></p> <p id='isLoop'></p> </div> </div> <!-- 音频控容器 --> <div id='audioContro'> <img src='img/play.png' title='播放' onclick="play()"/> <img src='img/pause.png' title='暂停' onclick="pause()"/> <img src='img/last.png' title='上一曲' onclick='last()'/> <img src='img/next.png' title='下一曲' onclick='next()'/> <img src='img/stop.png' title='停止' onclick="stop()"/> <img src='img/voice.png' title='音量' onclick="voiceDisplay()"/> <img src='img/metu.png' title='静音' onclick="mute()"/> <img src='img/loop.png' title='循环' onclick='loop()'/> <input id="voiceSlider" type="range" min="0" max="100" step="1" value="100" /> </div> </div> <script> var $audio=$('#audio1'); //获取音频播放对象 var audioList=['music/01.mp3','music/02.mp3','music/03.mp3'] //将歌曲放在一个列表中 for (i in audioList){ //遍历歌曲列表，并填加到歌曲列表容器 var $option='<option '+'value='+i+'>'+audioList[i]+'</option>' $('#audioSelect').append($option) } $('#audioSelect').prop('selectedIndex',0); //歌曲列表选中第一首 $audio.attr('src',audioList[$('#audioSelect').val()]); //音频标签默认选中第一首 $('#voice').html('音量:'+ $('#voiceSlider').val()+'%') $('#isLoop').html('顺序播放') $('#audioSelect').on('dblclick',function(){ //双击歌曲列表，播放相应的歌曲 $audio.attr('src',audioList[$('#audioSelect').val()]); play(); }) function play(){ //定义播放函数 $audio.attr('src',audioList[$('#audioSelect').val()]); //将当前选中的歌曲路径添加到播放标签 $audio[0].load() //载入歌曲 $audio[0].oncanplay=function(){ $('#audioSlider').attr('max',$audio[0].duration); //获取歌曲时长 $('#audioTolTime').html(getTime($audio[0].duration)); //在信息显示容器显示歌曲时长 } $audio[0].play(); //播放放歌曲 } function pause(){ //定义暂停函数 $audio[0].pause() } function stop(){ //定义停止函数 ，将暂停，再将当前播放时间设为0 $audio[0].pause() $audio[0].currentTime=0 } function mute(){ //定义静音函数，如果当前不是静音，则调为静音，反之调为非静音 console.log('metu') if ($audio[0].muted){ $audio[0].muted=false; } else{ $audio[0].muted=true; $('#voiceSlider').val(0) $('#voice').html('音量:'+$('#voiceSlider').val()+'%') } } function loop(){ //定义循环函数，如果当前不是循环，则调为循环，反之调为连续播放 if ($audio[0].loop){ $audio[0].loop=false; $('#stata').attr('src','img/continuous.png'); $('#isLoop').html('顺序播放'); } else{ $audio[0].loop=true; $('#stata').attr('src','img/loop.png'); $('#isLoop').html('单曲循环'); } } function last(){ //定义播放上一曲函数，将播放列表index-1后播放 if($('#audioSelect')[0].selectedIndex!=0){ $('#audioSelect')[0].selectedIndex--; play() } } function next(){ //定义播放下一曲函数，将播放列表index+1后播放 if($('#audioSelect')[0].selectedIndex+1<$('#audioSelect')[0].length){ $('#audioSelect')[0].selectedIndex++; play() } } function voiceDisplay(){ //显示音量调节滑块 $('#voiceSlider').css('display','block') } $('#audioSlider').on('input',function(){ //给进度条添加事件，当拉动进度条时，相应调整歌曲的播放位置 $audio[0].currentTime=$('#audioSlider').val() }) $audio.on('ended',function(){ //给音频标签添加事件，当歌曲播放完后，自动播放下一曲 if($('#audioSelect')[0].selectedIndex+1<$('#audioSelect')[0].length){ $('#audioSelect')[0].selectedIndex++; play() } else{ console.log('end') } }) $('#voiceSlider').on('mouseout',function(){ //当鼠标移出时，隐藏音量调节滑块 $('#voiceSlider').css('display','none') }) $('#voiceSlider').on('input',function(){ //拖动音量调节滑块时调节音频音量 if ($('#voiceSlider').val()){ $audio[0].muted=false; } else{ $audio[0].muted=true; } $('#voice').html('音量:'+ $('#voiceSlider').val()+'%') $audio[0].volume=$('#voiceSlider').val()/100; }) var audioTimer=setInterval(function(){ //定时器，用于动态显示播放时间和拉动进度条 sec=parseInt($audio[0].currentTime); $('#audioCurTime').html(getTime(sec)); $('#audioSlider')[0].value=sec; },1000) function getTime(sec){ //将秒数转换为00:00:00这样的时间格式 var h=parseInt(sec/3600).toString().padStart(2,'0') var m=parseInt((sec-h*3600)/60).toString().padStart(2,'0') var s=parseInt(sec-h*3600-m*60).toString().padStart(2,'0') var time=h+':'+m+':'+s return time } </script> </body> </html>
还没有评论，来说两句吧...