How to add different songs to a player in HTML and JavaScript?

Question

I'm struggling to add different songs to a very simple audio-player in HTML and JavaScript.

I'd like to be able to have a bunch of links on the page that would call a function that sets the player's "src" value, and then play the added song and stop the previous one playing. For some reason it doesn't work...

HTML:

<body>

<a href="" onclick="setfp(1)">Song 1</a>
<a href="" onclick="setfp(2)">Song 2</a>

<div class="audio-player">
    <div id="play-btn"></div>

    <div class="audio-wrapper" id="player-container" ref="javascript:;">
        <audio id="player">
            <source src="" type="audio/mp3">
        </audio>
    </div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'> 
</script><script  src="./script.js"></script>

</body>

JavaScript:

var sfile = "";

function setfp(song_number)
{
    sfile = "./sf/" + song_number.toString() + ".mp3";  
    alert(sfile);
}

function init()
{
    (function()
        {
            var playerContainer = document.getElementById('player-container');
            var player = document.getElementById('player');
            var isPlaying = false;
            var playBtn = document.getElementById('play-btn');          

            if (playBtn != null)
            {
                playBtn.addEventListener('click', function() {togglePlay()});
            }

            function togglePlay()
            {
                alert(sfile);

                if (player.paused === false)
                {
                    player.pause();
                    isPlaying = false;
                    $('#play-btn').removeClass('pause');
                } else {
                    player.src = sfile;
                    player.play();
                    $('#play-btn').addClass('pause');
                    isPlaying = true;
                }
            }
        }());
}

init();

For some reason, whenever the "play" button is pressed, the value "sfile" is empty even though I set it through the links.

FYI: `` elements are for navigation. Those who rely on assistive technology, like screen readers, depend on the semantics of a page being set up correctly. Don't use them because you need something for someone to click to activate some code. Just about any visual element has a `click` event so remove the `a` elements and replace them with `span` elements. You can always style the `span` elements to look like links. — Scott Marcus, Jul 14 '23 at 21:05
For starters, avoid using `` if your intention is not navigating the document location. Instead use ` — Roko C. Buljan, Jul 14 '23 at 21:05
Additionally, [avoid inline HTML event attributes (like `onclick`).](https://stackoverflow.com/questions/43459890/javascript-function-doesnt-work-when-link-is-clicked/43459991#43459991) and use `.addEventListener()` in JavaScript instead. — Scott Marcus, Jul 14 '23 at 21:08
Also, you're using JS. You don't need jQuery at all, specially not if all you're using it for is `$el.toggleClass()` - there's `Element.classList.toggle()` in plain JS for that purpose. — Roko C. Buljan, Jul 14 '23 at 21:12
Use a `class` to encapsulate the logic of having a playlist and playing/pausing that list. Then think about how you can attach the UI to that class. For instance. if you make the playlist an array of objects, like `playlist: [ { id: 1, name: "I Think I'm Turning Japanese", filename: './sf/1.mp3' }, { id: 2, name: "Domo Arigato Mr. Roboto", filename: './sf/2.mp3' } ]`, then you can simple create a function that takes that list and outputs buttons: `function renderPlaylist() { return player.playlist.map(s => ``).join(''); }` — Heretic Monkey, Jul 14 '23 at 21:20
If I change to play-btn.classList.add("pause"); or play-btn.classList.remove("pause"); the player button won't work — HelloWorldCpp, Jul 14 '23 at 21:49

ruddyjumbled · Accepted Answer · 2023-07-14T20:59:33.670

2

Global variable sfile is not being updated properly within the setfp() function. When setfp() is called from the links, it updates the value of sfile, but the togglePlay() function doesn't have access to the updated value because it's in a different scope. Try this code

HTML:

<a href="#" onclick="setfp(1)">Song 1</a>
<a href="#" onclick="setfp(2)">Song 2</a>

JavaScript:

var sfile = "";

function setfp(song_number) {
    sfile = "./sf/" + song_number.toString() + ".mp3";
    alert(sfile);
    togglePlay();
}

function togglePlay() {
    var player = document.getElementById('player');
    var playBtn = document.getElementById('play-btn');

    if (player.paused === false) {
        player.pause();
        $('#play-btn').removeClass('pause');
    } else {
        player.src = sfile;
        player.play();
        $('#play-btn').addClass('pause');
    }
}

function init() {
    var playBtn = document.getElementById('play-btn');

    if (playBtn != null) {
        playBtn.addEventListener('click', togglePlay);
    }
}

init();

The togglePlay() function is called from within setfp() after updating the sfile variable. This ensures that togglePlay() can access the updated value of sfile. The IIFE wrapping has also been removed for simplicity. Now, the play button should correctly play and pause the selected songs.

edited Jul 14 '23 at 20:59

answered Jul 14 '23 at 20:59

ruddyjumbled

50
3

2

Is this written by ChatGPT? – Sally loves Lightning Jul 14 '23 at 21:03
This is awesome! I'm very new to JS so I had no idea, thank you for explaining! Now I just need one thing to figure out - how to not stop the player when I click a different song to what's playing and only stop the player when the player-pause button is clicked or if the current song is finished :) – HelloWorldCpp Jul 14 '23 at 21:11
@HelloWorldCpp You can post another question for that matter – ruddyjumbled Jul 14 '23 at 21:13
@LightningMcQueen what made you say that? – seriously Jul 14 '23 at 21:20
Figured it all out now, plus added the "play from where it was paused" feature if the music hasn't been changed, it all works as expected now, thank you so much! – HelloWorldCpp Jul 14 '23 at 21:37
@seriously It was written pretty fast. – Sally loves Lightning Jul 15 '23 at 10:49

How to add different songs to a player in HTML and JavaScript?

1 Answers1