Maison > interface Web > js tutoriel > le corps du texte

JS implémente tour à tour la commutation et la lecture de la musique

php中世界最好的语言
Libérer: 2018-04-16 10:09:00
original
3614 Les gens l'ont consulté

Cette fois, je vais vous proposer JS pour implémenter la lecture par commutation de musique et activer la lecture. Quelles sont les précautions pour que JS implémente la lecture par commutation de musique et activer la lecture. Ce qui suit est un cas pratique. Jetons un coup d'oeil.

<!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>
Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :



Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!