JavaScript實現(xiàn)音樂自動切換和輪播
更新時間：2017年11月05日 15:12:21 作者：輸出是最好的學(xué)習(xí)
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)音樂自動切換和輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
前言：前兩天有個同學(xué)問我音樂自動切換，并在所有歌曲都播放完成以后實現(xiàn)循環(huán)播放的效果。自己折騰了一下做了出來，今天整理桌面的時候突然看見，在拖到回收站的一瞬間想著還是寫一篇博客分享一下。實現(xiàn)的方法有很多種，我這里簡單的實現(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++) {
// 為了知道具體是那一個li
aList[i].index = i;
// 給每一個li設(shè)定一個事件
aList[i].onclick = function() {
oVideo1.src = music[this.index].name + ".mp3";
}
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要對Array和String方法進(jìn)行總結(jié)，每一部分總結(jié)后有實例代碼，代碼中黃色框方法不改變原數(shù)組。PS:所有實例結(jié)果均一一運行所得。具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
下面小編就為大家?guī)硪黄猨s精確的加減乘除實例，具有非常好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了JS解析url參數(shù)為json對象問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)手動點贊效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-04-04
prototype與jquery下Ajax實現(xiàn)的差別
Ajax技術(shù)在web中應(yīng)用的相當(dāng)廣泛,最近項目需要用到Ajax，由于主站所用的是Jquey，而某個欄目的開發(fā)用的是prototype，這樣一來就必須對JS代碼做調(diào)整了。2009-09-09
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap Table使用方法，具有一定的實用性和參考價值，感興趣的小伙伴們可以參考一下2016-08-08
一文詳解JavaScript中的事件循環(huán)(event?loop)機(jī)制
JavaScript中的事件循環(huán)（Event?Loop）是一種重要的機(jī)制，用于管理異步代碼的執(zhí)行，它確保?JavaScript?單線程環(huán)境中的任務(wù)按照正確的順序執(zhí)行，同時允許異步操作如定時器、網(wǎng)絡(luò)請求和事件處理，本將給大家詳細(xì)的介紹一下JavaScript事件循環(huán)機(jī)制,感興趣的朋友可以參考下2023-12-12
一直以來都在函數(shù)式編程的大門之外徘徊,要入門的話首先得熟悉各種高階函數(shù),數(shù)組的reduce方法就是其中之一,這篇文章主要給大家介紹了關(guān)于js利用reduce方法讓你的代碼更加優(yōu)雅的相關(guān)資料,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了JavaScript之clipboard用法詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了小程序云開發(fā)實戰(zhàn)小結(jié)，本文詳細(xì)的介紹了云開發(fā)以及環(huán)境的搭建和項目實踐，非常具有實用價值，需要的朋友可以參考下2018-10-10