JavaScript實現音樂自動切換和輪播

來源：懂視網責編：小采時間：2020-11-27 22:26:11

JavaScript實現音樂自動切換和輪播

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

推薦度：

點擊下載本文 文檔為doc格式

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

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

通過修改video的src（這種應該是最好節省資源的）

<!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:"勇氣"}
 ]
 // 記錄當前是哪首歌曲
 var currentMusic = 0;
 // 獲取DOM
 var oVideo1 = document.querySelector("#video1");
 // 初始化
 oVideo1.src = music[0].name + '.mp3';

 // 歌曲結束事件
 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++) {
 // 為了知道具體是那一個li
 aList[i].index = i;
 // 給每一個li設定一個事件
 aList[i].onclick = function() {
 oVideo1.src = music[this.index].name + ".mp3";
 }
 }
 }
</script>

</body>
</html>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JavaScript實現音樂自動切換和輪播

推薦度：

點擊下載本文 文檔為doc格式

標簽：輪播 js javascript

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

JavaScript實現音樂自動切換和輪播

JavaScript實現音樂自動切換和輪播

JavaScript實現音樂自動切換和輪播

最新推薦

猜你喜歡

熱門推薦