<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.group-but {
margin: 10px;
}
</style>
</head>
<body>
<div class="group-but">
<button class="but but1" id="play" onclick="play()">播放</button>
<button class="but but2" id="pause" onclick="pause()">暂停</button>
<button class="but but3" id="fast" onclick="fast()">快进</button>
<button class="but but4" id="slow" onclick="slow()">快退</button>
<button class="but but5" id="first" onclick="prev()">上一首</button>
<button class="but but6" id="last" onclick="next()">下一首</button>
<!-- <span>音量<input id="sound" type="range" /></span>-->
<br />
<span onclick="muted()">静音</span>
<span>播放类型
<select id="playtype">
<option value="sequence">顺序播发</option>
<option value="random">随机播发</option>
<option value="cycle">循环</option>
</select>
</span>
<span>播放歌曲
<select id="playsong">
<option value="volvo">Volvo</option>
</select>
</span>
</div>
<div class="group-music">
<!-- controls：是否显示音频文件 -->
<audio id="audio" src="./music/Minstrel - eyecatch!.mp3" controls>
不支持此播放
</audio>
</div>
<script type="text/javascript">
//播放音乐列表
let musicList = [
"./music/乔楚熙 - 彩虹.mp3",
'./medio/demo.ogg',
'./music/Minstrel - eyecatch!.mp3',
'./music/张含韵,曹轩宾 - 初恋未满.mp3',
'./music/群星 - 空山鸟语.mp3',
'./music/魏小涵 - 幻音宝盒.mp3',
'./music/艾索 - 晚安喵.mp3'
]
//正在播放的音频索引
let index = 2;
//随机播放顺序
let audio = document.getElementById('audio');
let playType = document.getElementById('playtype'); //播放类型选择
let playsong = document.getElementById('playsong'); //播放歌曲切换
let sound = document.getElementById('sound'); //调整音量
let playTypeValue = 'sequence'; //记录播放类型
playType.onchange = function () {
playTypeValue = playType.value;
}
playsong.onchange = function () {
index = playsong.value;
}
//加载时
window.onload = function () {
//播放歌曲
console.log('音频播放时长--',audio.duration)
audio.src = musicList[index];
//当音频文件播放结束时触发事件:判断播放类型
audio.onended = function () {
/**
video及audio常用的属性
1. audio.currentSrc
2. audio.currentTime,
3. audio.buffered：返回TimeRanges对象，该对象可以获取浏览器已经缓存的媒体数据
4. audio.defaultPlaybackRate:修改默认播放速度。
document.getElementById("myVideo").defaultPlaybackRate = 0.5;
defaultPlaybackRate 属性设置或返回音频/视频的默认播放速度。
返回值： 数字值1，, 表示默认的播放速度
5. playbackRate 属性
设置该属性仅会改变默认的播放速度，而不是当前的。要改变当前的播放速度，请使用 playbackRate 属性
指示音频/视频的默认播放速度。
例值：
1.0 正常速度
0.5 半速（更慢）
2.0 倍速（更快）
-1.0 向后，正常速度
-0.5 向后，半速
6. networkState:获取下载音频、视频网络状态。
7. readyState：获取当前音频、视频网络准备状态
8. volume:获取当前音频、视频播放音量
9. audio.seekable 返回TimeRanges对象，该对象可以获取音频、视频可定位时间段，
通常可定位时间为开始事件，。。。
10. audio.seeking： boolean 播放器正在定位的时间点 true：播放器正在定位
**/
console.log('播完触发我哦',audio.currentSrc,audio.currentTime,audio.buffered)
if (playTypeValue == "sequence") {
// index++;
// if(index>musicList.length-1||index<0){
// return
// }
// audio.src=musicList[index];
audio.src = musicList[++index % musicList.length]
} else if (playTypeValue == "random") {
audio.src = musicList[Math.floor(Math.random() * musicList.length)];
}
audio.play()
}
}
//上一曲
function prev() {
console.log('--', index)
if (index <= 0) {
return
}
index--;
audio.src = musicList[index];
audio.play()
}
//下一曲
function next() {
console.log('+++', index)
if (index > musicList.length - 1) {
return
}
index++;
audio.src = musicList[index];
audio.play()
}
//静音及调音
function muted() {
audio.muted = !audio.muted;
}
function pause() {
audio.pause();
}
function play() {
audio.play();
}
function fast() {
audio.currentTime = Math.floor(audio.currentTime + 20);
}
function slow() {
audio.currentTime = Math.floor(audio.currentTime - 20);
}
sound.onchange = function () {
audio.volume = sound.value;
}
</script>
</body>
</html>
网友评论