HTML5音频播放标签介绍及实现简单的音频播放器代码

发表于：2025-05-23 14:39:50浏览：91次TAG： #H5 #音频 #音频播放器

新的项目要在网页端为课程加一个音频播放的功能，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>

栏目分类全部>