我正在尝试为mp3播放器项目的单个按钮添加播放/暂停切换功能,其中播放按钮将变为“ ||”播放音乐时显示图标,当音乐暂停时(仅使用原始JavaScript)将恢复为播放按钮。我尝试过执行if-else语句,该语句似乎通常用于这种类型的功能,但是图标只会变为“ ||”播放歌曲时显示图标,但不会暂停并再次单击时变为播放图标。我曾尝试创建一个单独的函数来暂停歌曲,但仍然无法获得理想的结果。
const returnFunc = () => <Redirect to="/" />;
useEffect(() => {
if (success) {
returnFunc();
}
}, [success, loading]);
var playButton = document.querySelector('#play-button');
var songArtist = document.querySelector('.song-artist');
var songTitle = document.querySelector('.song-name');
var stateIcon = document.querySelector('#stateicon');
var trackList = [ {
'Songartist': 'Artist1',
'Songtitle': 'Dance',
'songfile': 'Dance.mp3'
},
{
'Songartist': 'Artist2',
'Songtitle': 'Fight',
'songfile': 'Battle.mp3'
}
];
var currentSong = 0;
var song = new Audio();
function playSong() {
song.src = trackList[currentSong].songfile;
songArtist.innerText = trackList[currentSong].Songartist;
songTitle.innerText = trackList[currentSong].Songtitle;
if (song.paused) {
stateIcon.className = 'fas fa-pause';
song.play();
} else {
stateIcon.className = 'fas fa-play';
song.pause();
}
}
答案 0 :(得分:1)
所提供的片段不完整(其中一个元素没有“歌曲艺术家”类)。我建议首先查看您的javascript开发控制台是否有任何错误。否则,设置音频元素的src可能会重置音频的播放状态。您可以尝试仅设置与当前轨道的src不同的src。