实现音乐播放，切换和点击播放，自动循环下一首
实现的效果：
- 播放哪首歌，正在播放那就会显示这首歌的名字
- 当一首歌播放完之后，会自动的播放下一首歌曲（）按着歌单顺序播放
- 当点击上一首歌或者下一首歌或者播放完一首另一首跳出时，下面的列表的默认选项就会亮起
- 实现了点击上一首和下一首播放歌曲
方法1：
思路：这种写法的思路（确实自己想的复杂了一点，简便方法在后面）
- 想到创建一个数组来存放我想要播放的音乐
- 然后不是所有歌曲点击啊播放都在同步吗，所以我给audio设置了一个自定义属性，默认值为0
- 然后再列表里面也设置他们的value值为从0开始的
- 然后再通过随机获取点击option来获取它的value值，然后再给audio的自定义属性赋值为我点击这首歌的value值
- 然后每一个点击事件都写一个这个，然后就获取了不管我点击还是操作什么，audio都有一个值
- 然后我把它的值和我数组里面每一个对象的下标连接再一起，所以就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音频下拉列表播放（无脑法）</title>
<style>
#select {
width: 200px;
height: 250px;
}
</style>
</head>
<body>
<p>正在播放 <span id="text">周杰伦 - 暗号</span>歌曲</p>
<audio src="./MP3/周杰伦 - 暗号.mp3" controls id="audio" autoplay data-num="0"></audio>
<br>
<input type="button" value="上一首" id="topSings">
<input type="button" value="下一首" id="downSings">
<br>
<select name="" id="select" multiple>
<option value="0" selected>周杰伦 - 暗号</option>
<option value="1">周杰伦 - 半岛铁盒</option>
<option value="2">周杰伦 - 半兽人</option>
<option value="3">周杰伦 - 分裂</option>
<option value="4">周杰伦 - 火车叨过去</option>
<option value="5">周杰伦 - 龙拳</option>
<option value="6">周杰伦 - 米兰的小铁匠</option>
<option value="7">周杰伦 - 爷爷泡的茶</option>
<option value="8">周杰伦 - 最后的战役</option>
</select>
<script>
let text = document.getElementById("text");
let audio = document.getElementById("audio");
let select = document.getElementById("select");
let topSings = document.getElementById("topSings");
let downSings = document.getElementById("downSings");
let options = document.querySelectorAll("#select>option");
console.log(options);
let sings = [
{ src: "./MP3/周杰伦 - 暗号.mp3" },
{ src: "./MP3/周杰伦 - 半岛铁盒.mp3" },
{ src: "./MP3/周杰伦 - 半兽人.mp3" },
{ src: "./MP3/周杰伦 - 分裂.mp3" },
{ src: "./MP3/周杰伦 - 火车叨过去.mp3" },
{ src: "./MP3/周杰伦 - 龙拳.mp3" },
{ src: "./MP3/周杰伦 - 米兰的小铁匠.mp3" },
{ src: "./MP3/周杰伦 - 爷爷泡的茶.mp3" },
{ src: "./MP3/周杰伦 - 最后的战役.mp3" },
];
//封装options添加selelctd默认选中
function srlected() {
for (let j = 0; j < options.length; j++) {
if (audio.dataset.num == options[j].value) {
options[j].selected = true;
text.innerHTML = options[j].innerText;
}
else {
options[j].selected = false;
}
}
}
//播放完然后直接播放下一首歌曲
audio.onended = function () {
for (let i = 0; i < sings.length; i++) {
if (audio.dataset.num == i && i != sings.length - 1) {
audio.src = sings[i + 1].src;
audio.dataset.num = i + 1;
srlected();
break;
} else if (audio.dataset.num == sings.length - 1) {
audio.src = sings[i].src;
audio.dataset.num = i;
srlected();
break;
}
}
}
//点击上一首
topSings.onclick = function () {
for (let i = 0; i < sings.length; i++) {
if (audio.dataset.num == 0) {
audio.src = sings[sings.length - 1].src;
audio.dataset.num = sings.length - 1;
srlected();
break;
}
else if (parseInt(audio.dataset.num) == i && i != 0) {
audio.src = sings[i - 1].src;
audio.dataset.num = i - 1;
srlected();
break;
}
}
}
//点击下一首
downSings.onclick = function () {
// console.log(audio.dataset.num);
for (let i = 0; i < sings.length; i++) {
if (parseInt(audio.dataset.num) == i) {
audio.src = sings[i + 1].src;
audio.dataset.num = i + 1;
srlected();
break;
} else if (audio.dataset.num == sings.length - 1) {
audio.src = sings[i].src;
audio.dataset.num = i;
srlected();
break;
}
}
}
//点击下拉列表里面的歌曲
select.onchange = function () {
for (let i = 0; i < sings.length; i++) {
if (this.value == i) {
audio.src = sings[i].src;
audio.dataset.num = this.value;
}
}
}
</script>
</body>
</html>
方法二：
思路：
- 定义一个全局变量来控制当前我播放的是那首歌的下标
- 下拉列表还是有一个属性是获取当前点击的option的下标就是
selectedIndex - 当你切换点击歌曲的时候，就把你全局变量的参数赋给下拉列表的歌曲的下标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音频下拉列表播放简便方法</title>
<style>
#select {
width: 200px;
height: 250px;
}
</style>
</head>
<body>
<p id="text"></p>
<audio src="" controls id="audio"></audio>
<br>
<input type="button" value="上一首" id="topSings">
<input type="button" value="下一首" id="downSings">
<br>
<select name="" id="select" multiple></select>
<script>
let text = document.getElementById("text");
let audio = document.getElementById("audio");
let select = document.getElementById("select");
let topSings = document.getElementById("topSings");
let downSings = document.getElementById("downSings");
let options = document.querySelectorAll("#select>option");
let sings = [
{ src: "./MP3/周杰伦 - 暗号.mp3", name: "暗号" },
{ src: "./MP3/周杰伦 - 半岛铁盒.mp3", name: "半岛铁盒" },
{ src: "./MP3/周杰伦 - 半兽人.mp3", name: "半兽人" },
{ src: "./MP3/周杰伦 - 分裂.mp3", name: "分裂" },
{ src: "./MP3/周杰伦 - 火车叨过去.mp3", name: "火车叨过去" },
{ src: "./MP3/周杰伦 - 龙拳.mp3", name: "龙拳" },
{ src: "./MP3/周杰伦 - 米兰的小铁匠.mp3", name: "米兰的小铁匠" },
{ src: "./MP3/周杰伦 - 爷爷泡的茶.mp3", name: "爷爷泡的茶" },
{ src: "./MP3/周杰伦 - 最后的战役.mp3", name: "最后的战役" },
];
//封装函数，下一首和执行完在播放下一首歌
function foo() {
return function () {
count++;
if (count >= sings.length) {
count = 0;
}
audio.src = sings[count].src;
select.selectedIndex = count;
audio.play();
}
}
//上一首
function foo1() {
return function () {
if (count == 0) {
count = sings.length;
}
count--;
audio.src = sings[count].src;
select.selectedIndex = count;
audio.play();
}
}
//定义一个全局变量来控制你歌曲的位置
let count = 0;
//把歌曲添加到列表当中
for (let i = 0; i < sings.length; i++) {
let obj = new Option(sings[i].name, sings[i].src);
select.append(obj);
if (i == 0) {
obj.selected = true;
audio.src = obj.value;
}
}
//播放完然后直接播放下一首歌曲
audio.onended = foo();
//点击上一首
topSings.onclick = foo1();
//点击下一首
downSings.onclick = foo();
//点击下拉列表里面的歌曲
select.ondblclick = function () {
count = select.selectedIndex;
audio.src = sings[count].src;
audio.play();
}
//歌曲显示
audio.onplay = function () {
text.innerHTML = "正在播放 " + sings[count].name;
}
audio.onpause = function () {
text.innerHTML = "暂停播放 " + sings[count].name;
}
</script>
</body>
</html>
1736
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
