时间戳

首页 > 解决方案 > Javascript MP3 播放器播放/暂停切换功能

javascript - Javascript MP3 播放器播放/暂停切换功能

问题描述

我正在尝试开发一个具有播放/暂停切换功能的简单 mp3 播放器，其中播放按钮变为“||” 播放音乐时的图标，并在使用纯原生 Javascript 暂停音乐时恢复为播放按钮。我查看了有关此问题的其他帖子，但没有一个对我目前构建代码的方式有所帮助。

var playButton = document.querySelector('#play-button');
var firstSong = new Audio('CloudDance.mp3');
var trackList = [firstSong];


function currentSong() {
    for(var i=0; i<trackList.length; i++) {
        var songID = document.querySelector('#stateicon');
        if (trackList[i].paused) {
            songID.id = 'fas fa-pause';
            trackList[i].play();
        } else {
            songID.addEventListener('click', ) = 'fas fa-play';
            trackList[i].pause();
        }
    }
}
<body>
        <div class="screen">
            <div class="song-info-text">
                    <p class="song-artist">Some text</p>
                    <p class="song-name">Some more text</p>
            </div>
        </div>
        <div class="mp3-buttons">
            <button class="button" type="button" name="button"><i class="fas fa-step-backward"></i></button>
            <button id="play-button" onclick="currentSong()" type="button" name="button"><i  id="stateicon" class="fas fa-play"></i></button>
            <button class="button" type="button" name="button"><i class="fas fa-step-forward"></i></button>
        </div>
        <script src="index.js" charset="utf-8"></script>
    </body>

标签： javascript

解决方案

您需要做的就是根据您的需要设置类名。这是您的修复示例。

  songID.className = 'fas fa-pause';

这是下面的 JSFiddle 链接中使用的示例代码

var playButton = document.querySelector('#play-button');
var firstSong = new 
Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3');
var trackList = [firstSong];

function currentSong() {
    for(var i=0; i<trackList.length; i++) {
        var songID = document.querySelector('#stateicon');
        if (trackList[i].paused) {
            songID.className = 'fas fa-pause'; // Notice how we set className
            trackList[i].play();
        } else {
            songID.className = 'fas fa-play'; // Notice how we set className
            trackList[i].pause();
        }
    }
}

我还在 html 中更新了 font-awesome css url 以确保字体能够正常工作。这是修复的另一部分

    <header>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>
    </header>

JSFiddle 工作示例

注意：您可能会在以后遇到问题，因为您最终将使用 for 循环的方式同时播放多个文件。所以请记住，您需要知道它当前正在播放哪首歌曲，以便您可以正确暂停或播放同一首歌曲。并根据按下的按钮在向前或向后击打时切换当前歌曲。

推荐阅读