javascript - 如何播放/暂停按钮

Question

我希望使用“暂停”按钮从暂停的位置恢复歌曲，而不是重新启动歌曲。

仅使用 Vanilla 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 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();