时间戳

首页 > 解决方案 > 为什么我的“播放歌曲”按钮不起作用？

javascript - 为什么我的“播放歌曲”按钮不起作用？

问题描述

我正在制作一个音乐播放器，但是当我单击播放按钮时，图像没有旋转，并且“音乐信息”div 也没有出现，但控制台中没有宣布错误？我不知道怎么了？有谁能够帮我？太感谢了！由于某些原因，我会将我的 html 和 css 留在评论中！非常遗憾！这是我的js：

const musicContainer = document.querySelector('.music-container');
const playBtn = document.querySelector('#play');
const prevBtn = document.querySelector('#prev');
const nextBtn = document.querySelector('#next');
const audio = document.querySelector('#audio');
const progressContainer = document.querySelector('.progress-container');
const progress = document.querySelector('.progress');
const title = document.querySelector('#title');
const cover = document.querySelector('#cover');

//song titles
const songs = ['love you and love me', 'high kick ost', 'my girl ost'];

//keep tracks of songs
let songIndex = 2;

//initially load songs into DOM
loadSong(songs[songIndex]);

//update songs details
    function loadSong(song){
        title.innerText = song;
        audio.src = `${song}.mp3`;
        cover.src = `${song}.jpg`;
    }
function playSong(){
        musicContainer.classList.add('play');
    }
    

//Event Listener 
playBtn.addEventListener('click', ()=>{
    const isPlaying = musicContainer.classList.contains('play');

    if(isPlaying){
        pauseSong();
    }else{
        playSong();
    };

});

这是我的html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Music Player</title>
    <script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
   <link rel="stylesheet"  href="style.css">
  </head>
  <body>
    <h1>Music Player</h1>
    <div class="music-container  ">
      <div class="music-info">
        <h4 id="title">Ukelele</h4>
        <div class="progress-container">
          <div class="progress" alt="music-cover" id="cover"></div>
        </div>
      </div>
   <audio src="loveyou.mp3" id="audio"></audio>
   <div class="img-container">
     <img src="ukelele.jpg">
   </div>
     <div class="navigation">
       <button id="prev" class="action-btn">
         <i class="fas fa-backward"></i>
       </button>
       <button id="play" class="action-btn-big">
         <i class="fas fa-play"></i>
       </button>
       <button id="next" class="action-btn">
         <i class="fas fa-forward"></i>
       </button>
     </div>
   </div>
   
    
    <script src="main.js"></script>
  </body>
</html>

这是我的CSS：

*{
    box-sizing: border-box;
}
body{
    height:100vh;
    margin: 0;
    background-image: linear-gradient(0deg, rgb(247, 247, 247 ) 23.8%, 
                                            rgb(252, 221, 221) 92%
    );

    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.music-container{

    background-color:white;
    border-radius: 15px;
    box-shadow: 0 20px 20px 0 rgba(252, 169, 169, 0.6);
    display: flex;
     padding: 20px 30px;
    position: relative;
    margin:100px 0;
    

}
.img-container::after {
  content: '';/*compulsory for before and after*/
  background-color: #fff;
  height: 20px;
  width: 20px;
  position: absolute;
  bottom: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  
}
.img-container {
  position: relative;
  width: 110px;
}


.img-container img{
    width: inherit;/*lets the element's width be the same as its parent's*/
    height:110px;
    border-radius:50%;
    object-fit: cover;
    position: absolute;
    bottom:0;
    left:0;

    animation:rotate 3s linear infinite;

    animation-play-state: paused;
}

.music-container.play .img-container img{
    animation-play-state: running;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.navigation{
    display: flex;/*set items side by side*/
    align-items: center;
    justify-content: center;
}

.action-btn{
    background-color: #fff;
    border: none;
    font-size: 20px;
    padding: 10px;
    margin: 0 20px;
    cursor: pointer;
}
.action-btn-big{
    color: #cdc2d0;
    font-size: 30px;
}
.action-btn-big{
    border: none;
}

.music-info {
  background-color: rgba(255, 255, 255, 0.5);
   border-radius: 15px 15px 0 0;
   padding: 10px 10px 10px 150px;
   position: absolute;
   top:0;
   left:20px;
   width: calc(100% - 40px);
  
  opacity: 0;
  transform: translateY(0%);
  transition: transform 0.3s ease-in, opacity 0.3s ease in;/*in line with the up and down transform property*/
}

.music-info h4{
    margin: 0;
}

.music-container.play .music-info{
    opacity:1;
    transform: translateY(-100%);

}
.progress-container{
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px 0;
    height: 4px;
    width: 100%;
}

.progress{
    background: #fa8daa;
    border-radius: 5px;
    height: 100%;
    width: 0%;
    transition: width 0.1s linear;
}

标签： javascript

解决方案

您的代码中有很多错误，下面是音乐播放器的正确代码。将本地歌曲添加到songs = []

//song titles
const songs = ["over.wav", "rain.mp3", "robot.wav"];

var song;
let currSong = 2;

const nextSong = () => {
  song.pause()
  currSong = (currSong + 1) % songs.length;
  playSong(currSong);
};

const prevSong = () => {
    song.pause()
    if(currSong - 1 < 0){
        currSong = songs.length - 1
    }
    else{
        currSong = (currSong-1);
    }
    playSong(currSong);
};

//Event Listener
const playSong = (currPlayingSong = songs[2]) => {
  song = new Audio(songs[currSong]);
  song.play();
};
*{
  box-sizing: border-box;
}
body{
  height:100vh;
  margin: 0;
  background-image: linear-gradient(0deg, rgb(247, 247, 247 ) 23.8%,
                                          rgb(252, 221, 221) 92%
  );

  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.music-container{

  background-color:white;
  border-radius: 15px;
  box-shadow: 0 20px 20px 0 rgba(252, 169, 169, 0.6);
  display: flex;
   padding: 20px 30px;
  position: relative;
  margin:100px 0;


}
.img-container::after {
content: '';/*compulsory for before and after*/
background-color: #fff;
height: 20px;
width: 20px;
position: absolute;
bottom: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);

}
.img-container {
position: relative;
width: 110px;
}


.img-container img{
  width: inherit;/*lets the element's width be the same as its parent's*/
  height:110px;
  border-radius:50%;
  object-fit: cover;
  position: absolute;
  bottom:0;
  left:0;

  animation:rotate 3s linear infinite;

  animation-play-state: paused;
}

.music-container.play .img-container img{
  animation-play-state: running;
}

@keyframes rotate {
from {
  transform: rotate(0deg);
}

to {
  transform: rotate(360deg);
}
}

.navigation{
  display: flex;/*set items side by side*/
  align-items: center;
  justify-content: center;
}

.action-btn{
  background-color: #fff;
  border: none;
  font-size: 20px;
  padding: 10px;
  margin: 0 20px;
  cursor: pointer;
}
.action-btn-big{
  color: #cdc2d0;
  font-size: 30px;
}
.action-btn-big{
  border: none;
}

.music-info {
background-color: rgba(255, 255, 255, 0.5);
 border-radius: 15px 15px 0 0;
 padding: 10px 10px 10px 150px;
 position: absolute;
 top:0;
 left:20px;
 width: calc(100% - 40px);

opacity: 0;
transform: translateY(0%);
transition: transform 0.3s ease-in, opacity 0.3s ease in;/*in line with the up and down transform property*/
}

.music-info h4{
  margin: 0;
}

.music-container.play .music-info{
  opacity:1;
  transform: translateY(-100%);

}
.progress-container{
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  margin: 10px 0;
  height: 4px;
  width: 100%;
}

.progress{
  background: #fa8daa;
  border-radius: 5px;
  height: 100%;
  width: 0%;
  transition: width 0.1s linear;
}

.fas {
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Music Player</title>
    <script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
   <link rel="stylesheet"  href="style.css">
  </head>
  <body>
    <h1>Music Player</h1>
    <div class="music-container  ">
      <!-- <div class="music-info">
        <h4 id="title">Ukelele</h4>
        <div class="progress-container">
          <div class="progress" alt="music-cover" id="cover"></div>
        </div>
      </div> -->
   <!-- <audio src="loveyou.mp3" id="audio"></audio> -->
   <!-- <div class="img-container">
     <img src="ukelele.jpg">
   </div> -->
     <div class="navigation">
       <button id="prev" class="action-btn">
         <i class="fas fa-backward" onclick="prevSong()"></i>
       </button>
       <div id="play" class="action-btn-big">
         <i class="fas fa-play" onclick="playSong()"></i>
       </div>
       <button id="next" class="action-btn">
         <i class="fas fa-forward" onclick="nextSong()"></i>
       </button>
     </div>
   </div>


    <script src="style.js"></script>
  </body>
</html>

推荐阅读