js+audioは音楽プレーヤーを実現します。

7998 ワード

本論文の例では、js+audioの音楽プレーヤー実現のための具体的なコードを共有します。参考にしてください。具体的な内容は以下の通りです。


<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title>     </title>
 <link rel="shortcut icon" type="image/x-icon" href="img/an.ico" />
 <link rel="stylesheet" type="text/css" href="css/music_Play.css" />
 </head>

 <body>
 <div class="music_bg">
 <div class="music_cont">
 <audio id="audio1" src=""></audio>
 <div class="music_ctrl">
  <div class="music_btn">
  <div class="btn prev">
  <img id="prev" src="img/prev.png" />
  </div>
  <div class="btn play">
  <img id="play" src="img/pause.png" />
  </div>
  <div class="btn next">
  <img id="next" src="img/next.png" />
  </div>
  </div>
  <div class="music_name" id="music_name"></div>
 </div>
 <div class="music_line">
  <div class="line1" id="line1"></div>
  <div class="line2" id="line2"></div>
 </div>
 </div>
 </div>
 </body>
 <script src="js/audio_play.js" type="text/javascript" charset="utf-8"></script>
</html>


* {
 margin: 0;
 padding: 0;
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
}


body {
 overflow-x: hidden;
}

.music_bg {
 width: 100%;
 height: 666px;
 position: absolute;
 background-image: url(../img/bj.jpg);
 background-position: center;
 background-size: cover;
 background-repeat: no-repeat;
}

.music_cont {
 width: 300px;
 height: 300px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -150px 0 0 -150px;
 background-color: #000;
 border-radius: 10px;
 box-shadow: #000000 5px 5px 30px 5px
}

.music_line {
 width: 300px;
 height: 20px;
 overflow: hidden;
 position: absolute;
 top: 30%;
}

.line1 {
 width: 0%;
 height: 60%;
 float: left;
 margin-top: 1%;
 margin-right: -2px;
 background-color: rgba(255, 255, 255, 0.9);
}

.line2 {
 background-image: url(../img/point.png);
 height: 100%;
 background-repeat: no-repeat;
 width: 10px;
 background-position: center;
 float: left;
 cursor: pointer;
 margin-left: -4px;
 margin-right: -4px;
}

.music_ctrl {
 width: 300px;
 height: 200px;
 position: absolute;
 bottom: 0;
 background-color: #8c3232;
}

.music_btn {
 width: 300px;
 height: 100px;
 position: relative;
}

.btn {
 width: 33.33%;
 float: left;
 height: 40px;
 margin-top: 50px;
}

.prev img {
 float: right;
 margin: 10px 0px;
 cursor: pointer;
}

.play img {
 margin: 2px 35px;
 cursor: pointer;
}

.next img {
 float: left;
 margin: 10px 0px;
 cursor: pointer;
}

.music_name {
 width: 300px;
 height: 100px;
 position: relative;
 text-align: center;
 line-height: 100px;
 color: #fff;
 font-size: 18px;
}


//         
var index = 0,
 timer = null;
//          
var prev = document.getElementById("prev");
var play = document.getElementById("play");
var next = document.getElementById("next");
var audio1 = document.getElementById("audio1");
var music_name = document.getElementById("music_name");
var line1 = document.getElementById("line1");
var line2 = document.getElementById("line2");
//            
var music_src = ["1.mp3", "2.mp3", "3.mp3", "4.mp3"];
var music_title = ["   -  （live）", "      ", "     ", "  "];
//        
audio1.src = "audio/" + music_src[index];
music_name.innerText = music_title[index];
//        
play.onclick = function() {
 move1(); //      
};
prev.onclick = function() {
 prev1(); //    ，  
 move1();
}
next.onclick = function() {
 next1(); //    ，  
 move1();
 }

 //       
var next1 = function() { //   +1，             
 if (index == music_src.length - 1) {
  index = 0;
 } else {
  index++;
 }
 audio1.src = "audio/" + music_src[index];
 music_name.innerText = music_title[index];
 }
 //       
var prev1 = function() { //   -1，             
 if (index == 0) {
  index = music_src.length - 1;
 } else {
  index--;
 }
 audio1.src = "audio/" + music_src[index];
 music_name.innerText = music_title[index];
 }
 //         
var move1 = function() {
 //           
 if (audio1.paused) { //   ，    ，      ，     
  audio1.play();
  play.src = "img/play.png";
  timer = setInterval(function() { //  500      
  var drtTime = audio1.duration; //        （               ，    ，       ）
  var curTime = audio1.currentTime; //           
  line1.style.width = (curTime / drtTime) * 100 + "%"; //          
  if (drtTime==curTime) {
   next.onclick();
  }
  console.log(drtTime,curTime);
  }, 500);
 } else { //   ，    ，      
  audio1.pause();
  play.src = "img/pause.png";
  clearInterval(timer);
 }
 }
 //            
var flag = false; //   
var mx = null; //   
line2.onmousedown = function(event) {
 //     
 flag = true;
 //         
 mx = event.pageX - line2.offsetLeft;
 clearInterval(timer);
}
document.body.onmousemove = function(event) {
 //     true     
 if (flag) {
  //      =      -  
  var x1 = event.pageX - mx;
  //        =    -         
  var x2 = x1 - line1.offsetLeft;
  //         /            
  var x3 = x2 / 295;
  //       3 
  var x4 = x3.toFixed(3);
  if (x4 >= 0 && x4 < 1) {
  //      0--1           
  line1.style.width = x4 * 100 + "%";
  }else if (x4 == 1) {
  next.onclick();
  }
 }
 }
 //      ，    ，        ，         
document.body.onmouseup = function(event) {
 flag = false; //     
 var x5 = parseInt(line1.style.width) / 100; //            
 var drtTime = audio1.duration; //        
 audio1.currentTime = (drtTime * x5).toFixed(0); //         
 timer = setInterval(function() { //        
 var curTime = audio1.currentTime;
 line1.style.width = (curTime / drtTime) * 100 + "%";
 }, 500);
}