示例

在这里插入图片描述

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/a062562745.js" crossorigin="anonymous"></script>
    <title>MP3 Player</title>
    <link rel=stylesheet href="style.css" media=all> 
  </head>
  <body>




<audio id="myAudio" ontimeupdate="onTimeUpdate()">
  <!-- <source src="audio.ogg" type="audio/ogg"> -->
  <source id="source-audio" src="" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>


<div class="player-ctn">
  <div class="infos-ctn">
    <div class="timer">00:00</div>
    <div class="title"></div>
    <div class="duration">00:00</div>
  </div>
  <div id="myProgress">
    <div id="myBar"></div>
  </div>
  <div class="btn-ctn">
     <div class="btn-action first-btn" onclick="previous()">
        <div id="btn-faws-back">
          <i class='fas fa-step-backward'></i>
        </div>
     </div>
     <div class="btn-action" onclick="rewind()">
        <div id="btn-faws-rewind">
          <i class='fas fa-backward'></i>
        </div>
     </div>
     <div class="btn-action" onclick="toggleAudio()">
        <div id="btn-faws-play-pause">
          <i class='fas fa-play' id="icon-play"></i>
          <i class='fas fa-pause' id="icon-pause" style="display: none"></i>
        </div>
     </div>
     <div class="btn-play" onclick="forward()">
        <div id="btn-faws-forward">
          <i class='fas fa-forward'></i>
        </div>
     </div>
     <div class="btn-action" onclick="next()">
        <div id="btn-faws-next">
          <i class='fas fa-step-forward'></i>
        </div>
     </div>
     <div class="btn-mute" id="toggleMute" onclick="toggleMute()">
        <div id="btn-faws-volume">
          <i id="icon-vol-up" class='fas fa-volume-up'></i>
          <i id="icon-vol-mute" class='fas fa-volume-mute' style="display: none"></i>
        </div>
     </div>
  </div>
  <div class="playlist-ctn"></div>
</div>
<script src=app.js></script>
  </body>
</html>

CSS

body{
  background-color: #2d2d2d;
  color: #ffc266;
  font-family: 'Roboto', sans-serif;
}
#myProgress {
  width: 420px;
   background-color: #d9d9f2; 
  cursor: pointer;
  border-radius: 10px;
}


#myBar {
  width: 0%;
  height: 5px;
  background-color: #ffc266;
  border-radius: 10px;
}


.logo {
  fill: red;
}


.btn-action{
  cursor: pointer;
  padding-top: 10px;
  width: 30px;
}


.btn-ctn, .infos-ctn{
  display: flex;
  align-items: center;
  justify-content: center;
}
.infos-ctn{
padding-top: 20px;
}


.btn-ctn > div {
 padding: 5px;
 margin-top: 18px;
 margin-bottom: 18px;
}


.infos-ctn > div {
 margin-bottom: 8px;
 color: #ffc266;
}


.first-btn{
  margin-left: 3px;
}


.duration{
  margin-left: 10px;
}


.title{
  margin-left: 10px;
  width: 210px;
  text-align: center;
}


.player-ctn{
  border-radius: 15px;
  width: 420px;
  padding: 10px;
  background-color: #373737;
  margin:auto;
  margin-top: 100px;
}


.playlist-track-ctn{
  display: flex;
  background-color: #464646;
  margin-top: 3px;
  border-radius: 5px;
  cursor: pointer;
}
.playlist-track-ctn:last-child{
  /*border: 1px solid #ffc266; */
}


.playlist-track-ctn > div{
  margin:10px;
}
.playlist-info-track{
  width: 80%;
}
.playlist-info-track,.playlist-duration{
  padding-top: 7px;
  padding-bottom: 7px;
  color: #e9cc95;
  font-size: 14px;
  pointer-events: none;
}
.playlist-ctn{
   padding-bottom: 20px;
}
.active-track{
  background: #4d4d4d;
  color: #ffc266 !important;
  font-weight: bold;
  
}


.active-track > .playlist-info-track,.active-track >.playlist-duration,.active-track > .playlist-btn-play{
  color: #ffc266 !important;
}




.playlist-btn-play{
  pointer-events: none;
  padding-top: 5px;
  padding-bottom: 5px;
}
.fas{
  color: #ffc266;
  font-size: 20px;
}

JS

function createTrackItem(index,name,duration){
    var trackItem = document.createElement('div');
    trackItem.setAttribute("class", "playlist-track-ctn");
    trackItem.setAttribute("id", "ptc-"+index);
    trackItem.setAttribute("data-index", index);
    document.querySelector(".playlist-ctn").appendChild(trackItem);


    var playBtnItem = document.createElement('div');
    playBtnItem.setAttribute("class", "playlist-btn-play");
    playBtnItem.setAttribute("id", "pbp-"+index);
    document.querySelector("#ptc-"+index).appendChild(playBtnItem);


    var btnImg = document.createElement('i');
    btnImg.setAttribute("class", "fas fa-play");
    btnImg.setAttribute("height", "40");
    btnImg.setAttribute("width", "40");
    btnImg.setAttribute("id", "p-img-"+index);
    document.querySelector("#pbp-"+index).appendChild(btnImg);


    var trackInfoItem = document.createElement('div');
    trackInfoItem.setAttribute("class", "playlist-info-track");
    trackInfoItem.innerHTML = name
    document.querySelector("#ptc-"+index).appendChild(trackInfoItem);


    var trackDurationItem = document.createElement('div');
    trackDurationItem.setAttribute("class", "playlist-duration");
    trackDurationItem.innerHTML = duration
    document.querySelector("#ptc-"+index).appendChild(trackDurationItem);
  }


  var listAudio = [
    {
      name:"Artist 1 - audio 1",
      file:"https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3",
      duration:"02:12"
    },
    {
      name:"Artist 2 - audio 2",
      file:"https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_2MG.mp3",
      duration:"00:52"
    },
    {
      name:"Artist 3 - audio 3",
      file:"https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_1MG.mp3",
      duration:"00:27"
    }
  ]


  for (var i = 0; i < listAudio.length; i++) {
      createTrackItem(i,listAudio[i].name,listAudio[i].duration);
  }
  var indexAudio = 0;


  function loadNewTrack(index){
    var player = document.querySelector('#source-audio')
    player.src = listAudio[index].file
    document.querySelector('.title').innerHTML = listAudio[index].name
    this.currentAudio = document.getElementById("myAudio");
    this.currentAudio.load()
    this.toggleAudio()
    this.updateStylePlaylist(this.indexAudio,index)
    this.indexAudio = index;
  }


  var playListItems = document.querySelectorAll(".playlist-track-ctn");


  for (let i = 0; i < playListItems.length; i++){
    playListItems[i].addEventListener("click", getClickedElement.bind(this));
  }


  function getClickedElement(event) {
    for (let i = 0; i < playListItems.length; i++){
      if(playListItems[i] == event.target){
        var clickedIndex = event.target.getAttribute("data-index")
        if (clickedIndex == this.indexAudio ) { // alert('Same audio');
            this.toggleAudio()
        }else{
            loadNewTrack(clickedIndex);
        }
      }
    }
  }


  document.querySelector('#source-audio').src = listAudio[indexAudio].file
  document.querySelector('.title').innerHTML = listAudio[indexAudio].name




  var currentAudio = document.getElementById("myAudio");


  currentAudio.load()
  
  currentAudio.onloadedmetadata = function() {
        document.getElementsByClassName('duration')[0].innerHTML = this.getMinutes(this.currentAudio.duration)
  }.bind(this);


  var interval1;


  function toggleAudio() {


    if (this.currentAudio.paused) {
      document.querySelector('#icon-play').style.display = 'none';
      document.querySelector('#icon-pause').style.display = 'block';
      document.querySelector('#ptc-'+this.indexAudio).classList.add("active-track");
      this.playToPause(this.indexAudio)
      this.currentAudio.play();
    }else{
      document.querySelector('#icon-play').style.display = 'block';
      document.querySelector('#icon-pause').style.display = 'none';
      this.pauseToPlay(this.indexAudio)
      this.currentAudio.pause();
    }
  }


  function pauseAudio() {
    this.currentAudio.pause();
    clearInterval(interval1);
  }


  var timer = document.getElementsByClassName('timer')[0]


  var barProgress = document.getElementById("myBar");




  var width = 0;


  function onTimeUpdate() {
    var t = this.currentAudio.currentTime
    timer.innerHTML = this.getMinutes(t);
    this.setBarProgress();
    if (this.currentAudio.ended) {
      document.querySelector('#icon-play').style.display = 'block';
      document.querySelector('#icon-pause').style.display = 'none';
      this.pauseToPlay(this.indexAudio)
      if (this.indexAudio < listAudio.length-1) {
          var index = parseInt(this.indexAudio)+1
          this.loadNewTrack(index)
      }
    }
  }




  function setBarProgress(){
    var progress = (this.currentAudio.currentTime/this.currentAudio.duration)*100;
    document.getElementById("myBar").style.width = progress + "%";
  }




  function getMinutes(t){
    var min = parseInt(parseInt(t)/60);
    var sec = parseInt(t%60);
    if (sec < 10) {
      sec = "0"+sec
    }
    if (min < 10) {
      min = "0"+min
    }
    return min+":"+sec
  }


  var progressbar = document.querySelector('#myProgress')
  progressbar.addEventListener("click", seek.bind(this));




  function seek(event) {
    var percent = event.offsetX / progressbar.offsetWidth;
    this.currentAudio.currentTime = percent * this.currentAudio.duration;
    barProgress.style.width = percent*100 + "%";
  }


  function forward(){
    this.currentAudio.currentTime = this.currentAudio.currentTime + 5
    this.setBarProgress();
  }


  function rewind(){
    this.currentAudio.currentTime = this.currentAudio.currentTime - 5
    this.setBarProgress();
  }




  function next(){
    if (this.indexAudio <listAudio.length-1) {
        var oldIndex = this.indexAudio
        this.indexAudio++;
        updateStylePlaylist(oldIndex,this.indexAudio)
        this.loadNewTrack(this.indexAudio);
    }
  }


  function previous(){
    if (this.indexAudio>0) {
        var oldIndex = this.indexAudio
        this.indexAudio--;
        updateStylePlaylist(oldIndex,this.indexAudio)
        this.loadNewTrack(this.indexAudio);
    }
  }


  function updateStylePlaylist(oldIndex,newIndex){
    document.querySelector('#ptc-'+oldIndex).classList.remove("active-track");
    this.pauseToPlay(oldIndex);
    document.querySelector('#ptc-'+newIndex).classList.add("active-track");
    this.playToPause(newIndex)
  }


  function playToPause(index){
    var ele = document.querySelector('#p-img-'+index)
    ele.classList.remove("fa-play");
    ele.classList.add("fa-pause");
  }


  function pauseToPlay(index){
    var ele = document.querySelector('#p-img-'+index)
    ele.classList.remove("fa-pause");
    ele.classList.add("fa-play");
  }




  function toggleMute(){
    var btnMute = document.querySelector('#toggleMute');
    var volUp = document.querySelector('#icon-vol-up');
    var volMute = document.querySelector('#icon-vol-mute');
    if (this.currentAudio.muted == false) {
       this.currentAudio.muted = true
       volUp.style.display = "none"
       volMute.style.display = "block"
    }else{
      this.currentAudio.muted = false
      volMute.style.display = "none"
      volUp.style.display = "block"
    }
  }

盈嘉小红砖(同公众号)

发布了117 篇原创文章 · 获赞 54 · 访问量 8650

私信关注

音乐播放界面（Music playing interface）

音乐播放界面如何生成？

示例

HTML

CSS

JS

猜你喜欢