Question

我正在尝试为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();
        }
    }

Answer 1

所提供的片段不完整（其中一个元素没有“歌曲艺术家”类）。我建议首先查看您的javascript开发控制台是否有任何错误。否则，设置音频元素的src可能会重置音频的播放状态。您可以尝试仅设置与当前轨道的src不同的src。

JavaScript播放/暂停切换功能

1 个答案: