JavaScript實(shí)現(xiàn)音樂自動(dòng)切換和輪播

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:26:11

JavaScript實(shí)現(xiàn)音樂自動(dòng)切換和輪播

JavaScript實(shí)現(xiàn)音樂自動(dòng)切換和輪播:前言：前兩天有個(gè)同學(xué)問我音樂自動(dòng)切換，并在所有歌曲都播放完成以后實(shí)現(xiàn)循環(huán)播放的效果。自己折騰了一下做了出來，今天整理桌面的時(shí)候突然看見，在拖到回收站的一瞬間想著還是寫一篇博客分享一下。實(shí)現(xiàn)的方法有很多種，我這里簡(jiǎn)單的實(shí)現(xiàn)。通過修改video的

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JavaScript實(shí)現(xiàn)音樂自動(dòng)切換和輪播:前言：前兩天有個(gè)同學(xué)問我音樂自動(dòng)切換，并在所有歌曲都播放完成以后實(shí)現(xiàn)循環(huán)播放的效果。自己折騰了一下做了出來，今天整理桌面的時(shí)候突然看見，在拖到回收站的一瞬間想著還是寫一篇博客分享一下。實(shí)現(xiàn)的方法有很多種，我這里簡(jiǎn)單的實(shí)現(xiàn)。通過修改video的

前言：前兩天有個(gè)同學(xué)問我音樂自動(dòng)切換，并在所有歌曲都播放完成以后實(shí)現(xiàn)循環(huán)播放的效果。自己折騰了一下做了出來，今天整理桌面的時(shí)候突然看見，在拖到回收站的一瞬間想著還是寫一篇博客分享一下。實(shí)現(xiàn)的方法有很多種，我這里簡(jiǎn)單的實(shí)現(xiàn)。

通過修改video的src（這種應(yīng)該是最好節(jié)省資源的）

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>welcome</title>
 <style type="text/css">
 .content {
 width: 600px;
 margin:0 auto;
 border:1px solid red;
 }
 .left-bar {
 width: 300px;
 height: 200px;
 float: left;
 border:1px solid red;
 }
 ul li {
 list-style: none;
 margin-top: 20px;
 cursor: pointer;
 }
 li:hover {
 color: orange;
 }
 </style>
</head>

<body>
<div class="left-bar">
 <ul>
 <li class="music-name">十年</li>
 <li class="music-name">朋友</li>
 <li class="music-name">勇氣</li>
 </ul>
</div>
<div class="content">
 <video src="" id="video1" controls autoplay></video>
 <button id="btn">按鈕</button>
</div>

<script>
 window.onload = function() {
 // 歌曲列表
 var music = [
 {id: 1, name:"十年"},
 {id: 2, name:"朋友"},
 {id: 3, name:"勇氣"}
 ]
 // 記錄當(dāng)前是哪首歌曲
 var currentMusic = 0;
 // 獲取DOM
 var oVideo1 = document.querySelector("#video1");
 // 初始化
 oVideo1.src = music[0].name + '.mp3';

 // 歌曲結(jié)束事件
 oVideo1.onended = function() {
 currentMusic += 1;
 // 判斷是否是最后一首
 if(currentMusic === music.length) {
 currentMusic = 0;
 }
 var sr = music[currentMusic].name + '.mp3';
 this.src=sr;
 }

 // 獲取左邊歌曲列表的DOM
 var aList = document.getElementsByClassName("music-name");
 for(var i=0; i<aList.length; i++) {
 // 為了知道具體是那一個(gè)li
 aList[i].index = i;
 // 給每一個(gè)li設(shè)定一個(gè)事件
 aList[i].onclick = function() {
 oVideo1.src = music[this.index].name + ".mp3";
 }
 }
 }
</script>

</body>
</html>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JavaScript實(shí)現(xiàn)音樂自動(dòng)切換和輪播

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：輪播 js javascript

熱門焦點(diǎn)

JavaScript實(shí)現(xiàn)音樂自動(dòng)切換和輪播

JavaScript實(shí)現(xiàn)音樂自動(dòng)切換和輪播

JavaScript實(shí)現(xiàn)音樂自動(dòng)切換和輪播

最新推薦

猜你喜歡

熱門推薦