ホームページ > 記事 > ウェブフロントエンド > JSは音楽の切り替えと再生を順番に実装します
JSは音楽の切り替えと再生を順番に実装します
- php中世界最好的语言オリジナル
- 2018-04-16 10:09:003633ブラウズ
今回は、音楽の切り替え再生と回転再生を実装するための JS を紹介します。JS を使用して音楽の切り替え再生と回転再生を実装するための 注意事項 は何ですか。以下は実際的なケースです。
<!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>
<p class="left-bar">
<ul>
<li class="music-name">十年</li>
<li class="music-name">朋友</li>
<li class="music-name">勇气</li>
</ul>
</p>
<p class="content">
<video src="" id="video1" controls autoplay></video>
<button id="btn">按钮</button>
</p>
<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>この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
以上がJSは音楽の切り替えと再生を順番に実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。