如何制作播放/暫停按鈕

Question

我希望暫停按鈕可以從暫停的位置恢復歌曲，而不是重新開始歌曲。

請僅使用香草 javascript，謝謝！

 var songs = [ "song1.mp3", "song2.mp3", "song3.mp3", ]; var song = new Audio(); var currentSong = 0; var playButton = document.querySelector(".play"); var pauseButton = document.querySelector(".pause"); function playSong() { song.src = songs[currentSong]; pauseButton.style.display = "block"; playButton.style.display = "none"; songTitle.textContent = sT[currentSong]; Artist.textContent = artistNames[currentSong]; songCover.src = songCovers[currentSong]; song.play(); } playButton.addEventListener("click", function playSong() { song.src = songs[currentSong]; pauseButton.style.display = "block"; playButton.style.display = "none"; songTitle.textContent = sT[currentSong]; Artist.textContent = artistNames[currentSong]; songCover.src = songCovers[currentSong]; song.play(); }); pauseButton.addEventListener("click", function pauseSong() { song.pause(); pauseButton.style.display = "none"; playButton.style.display = "block"; });

Answer 1

歌曲會重置，因為每次您單擊play按鈕時，都會再次分配歌曲的src 。 因此這首歌將從頭開始。

因此，您需要更改選擇歌曲的代碼部分。 在play function 之外執行此操作，以便單擊播放只會播放，單擊暫停只會暫停。

function chooseSong() {
  song.src = songs[currentSong];
  songTitle.textContent = sT[currentSong];
  Artist.textContent = artistNames[currentSong];
  songCover.src = songCovers[currentSong];
}

function playSong() {
  pauseButton.style.display = "block";
  playButton.style.display = "none";
  song.play();
}

function pauseSong() {
  pauseButton.style.display = "none";
  playButton.style.display = "block";
  song.pause();
}

playButton.addEventListener('click', playSong);
pauseButton.addEventListener('click', pauseSong);

chooseSong();