H5音频播放标签
audio标签是用来播放音频文件的。
支持的格式:
音频格式 | MINE-type |
---|
MP3 | audio/mpeg |
Ogg | audio/ogg |
Wav | audio/wav |
可以在 和 之间放置文本内容,这些文本信息将会被显示在那些不支持 标签的浏览器中。
1.audio对象属性:
2.Audio 对象方法
方法 | 描述 |
---|
addTextTrack() | 在音频中添加一个新的文本轨道 |
canPlayType() | 检查浏览器是否可以播放指定的音频类型 |
fastSeek() | 在音频播放器中指定播放时间。 |
getStartDate() | 返回一个新的Date对象,表示当前时间轴偏移量 |
load() | 重新加载音频元素 |
play() | 开始播放音频 |
pause() | 暂停当前播放的音频 |
3.Audio对象事件
4.简易音频播放器代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>音视频</title>
<script src='../js/jquery-3.7.1.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;
-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(){
$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(){
if($('#audioSelect')[0].selectedIndex!=0){
$('#audioSelect')[0].selectedIndex--;
play()
}
}
function next(){
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){
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>