Javascript MP3 player play/pause toggle functionality

Question

I'm trying to develop a simple mp3 player with play/pause toggle functionality where the play button turns to a "||" icon when music is playing and reverts to the play button when the music is paused by using purely vanilla Javascript. I have viewed other posts regarding this matter, but none of them have helped me with the way I currently have my code structured.

 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>

Answer 1

All you need to do is set the class name depending on what you want. Here is your example with the fix.

  songID.className = 'fas fa-pause';

Here is the sample code used in the JSFiddle link below

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();
        }
    }
}

I also updated font-awesome css url in html to make sure the fonts would work properly. This is another part of the fix

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

JSFiddle Working Example

NOTE: You may end up running into issues later as you will end up playing multiple files at the same time with the way you have the for loop. So just keep in mind that you need to know which song it's currently playing so that you can properly pause or play that same song. And switch the current song when hit forward or backwards depending on the button pressed.

Javascript MP3 player play/pause toggle functionality

Question

1 answers

solution1
0 2020-09-04 01:01:38

Javascript MP3 player play/pause toggle functionality

Question

1 answers

solution1 0 2020-09-04 01:01:38

solution1
0 2020-09-04 01:01:38