Help! making a music player for my website

[lakes]

I want to know how to make a music player for a webpage on my eepsite (not my neocities since it has file type restrictions), using javascript, html and css. I want to make it myself. Don't get me wrong: I like stuff like Webamp, SCM Player, Wikplayer, etc. But I want to learn how to code it myself, especially since I wanna rely less on 3rd party services for my site.

[Dan Q]

At its simplest, an audio player can be just this:

Code: html

<audio controls src="/path/to/your-musicfile.mp3"></audio>

If you remove the controls, the player will become invisible, and you can start writing JavaScript to control it instead. You might also like to give the player an identifier of some kind to make it easier to get a handle on it with your JavaScript:

Code: html

<audio id="my-music" src="/path/to/your-musicfile.mp3"></audio>

Now you can write JavaScript that interacts with that audio element. For instance, if you had a <button id="play-pause-toggle">Play/pause</button> that toggled whether the music was playing, you might write:

Code: javascript

// Get a handle on the audio player and the play/pause button:
const audioPlayer  = document.querySelector('#my-music');
const toggleButton = document.querySelector('#play-pause-toggle');

// When the button is clicked:
toggleButton.addEventListener('click', function(){
  if(audioPlayer.paused) { // If it's paused,
    audioPlayer.play();    // play.
  } else {                 // Otherwise:
    audioPlayer.pause();   // pause.
  }
});

I hope that gives you a starting point for your own explorations!

[MediocreMetastasis]

I followed this tutorial online https://css-tricks.com/lets-create-a-custom-audio-player/

Here's how my code looks like in the end (minus the css)

Spoiler

Code

<div class="draggable" id="AudioPlayer">
    <div id="AudioPlayerContainer">
        <audio src="/Assets/Music/Step Back.mp3" id="AudioPlayerAudio" preload=”metadata” loop></audio>

        <span id="TrackTitle">StepBack</span>
        <!-- swaps with pause icon -->
        <button id="play-icon"></button>
        
        <span id="current-time" class="time">0:00</span>
        <span id="duration" class="time">0:00</span>
        <input type="range" id="seek-slider" max="100" value="0">

        <output id="volume-output">100</output>
        <input type="range" id="volume-slider" max="100" value="100">

        <div id="AudioList">
            <a onclick="changeSong('/Assets/Music/Step Back.mp3')">Step Back.mp3</a>
            <a onclick="changeSong('/Assets/Music/Drowning.mp3')">Drowning.mp3</a>
            <a onclick="changeSong('/Assets/Music/Wake Up.mp3')">Wake Up.mp3</a>
            <a onclick="changeSong('/Assets/Music/Join Me.mp3')">Join Me.mp3</a>
            <a onclick="changeSong('/Assets/Music/Is This the Part.mp3')">Is This the Part.mp3</a>
            <a onclick="changeSong('/Assets/Music/Cautionary Warning.mp3')">Cautionary Warning.mp3</a>
        </div>
    </div>
</div>
<script>
    const audio = document.getElementById("AudioPlayerAudio");
    const audioPlayerContainer = document.getElementById("AudioPlayerContainer");

    const durationContainer = document.getElementById('duration');

    const seekSlider = document.getElementById('seek-slider');
    const volumeSlider = document.getElementById('volume-slider');
    const outputContainer = document.getElementById('volume-output');
    const currentTimeContainer = document.getElementById('current-time');

    const play_butt = document.getElementById("play-icon");
    let state = 0;

    const calculateTime = (secs) => {
        const minutes = Math.floor(secs / 60);
        const seconds = Math.floor(secs % 60);
        const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
        return `${minutes}:${returnedSeconds}`;
    }
    const displayDuration = () => {
        durationContainer.textContent = calculateTime(audio.duration);
    }

    const setSliderMax = () => {
        seekSlider.max = Math.floor(audio.duration);
    }

    const displayBufferedAmount = () => {
        const bufferedAmount = Math.floor(audio.buffered.end(audio.buffered.length - 1));
        audioPlayerContainer.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`);
    }

    audio.addEventListener('loadedmetadata', () => {
        displayDuration();
    });

    seekSlider.addEventListener("mousedown", () => {
        event.stopPropagation();
    });
    seekSlider.addEventListener('change', () => {
        audio.currentTime = seekSlider.value;
        if(!audio.paused) {
            requestAnimationFrame(whilePlaying);
        }
    });
    seekSlider.addEventListener('input', () => {
        currentTimeContainer.textContent = calculateTime(seekSlider.value);
        if(!audio.paused) {
            cancelAnimationFrame(raf);
        }
    });

    volumeSlider.addEventListener("mousedown", () => {
        event.stopPropagation();
    });
    volumeSlider.addEventListener('input', (e) => {
        const value = e.target.value;

        outputContainer.textContent = value;
        audio.volume = value / 100;
    });

    play_butt.addEventListener('click', () => {
        if(state === 1) {
            audio.pause();
            cancelAnimationFrame(raf);
            state = 0;
        } else {
            audio.play();
            requestAnimationFrame(whilePlaying);
            state = 1;
        }
    });


    let raf = null;

    const whilePlaying = () => {
        seekSlider.value = Math.floor(audio.currentTime);
        currentTimeContainer.textContent = calculateTime(seekSlider.value);
        audioPlayerContainer.style.setProperty('--seek-before-width', `${seekSlider.value / seekSlider.max * 100}%`);
        raf = requestAnimationFrame(whilePlaying);
    }


    if (audio.readyState > 0) {
        displayDuration();
        setSliderMax();
        displayBufferedAmount();
    } else {
        audio.addEventListener('loadedmetadata', () => {
            displayDuration();
            setSliderMax();
            displayBufferedAmount();
        });
    }

    audio.addEventListener('progress', displayBufferedAmount);

    const TrackTitle = document.getElementById("TrackTitle");

    const changeSong = (_src) => {
        audio.src = _src;
        audio.currentTime = 0;
        seekSlider.value = 0;
        audio.play();
        TrackTitle.textContent = _src.split("/").at(-1);
        state = 1;
    }
</script>
<script src="/Data/Scripts/draggableDiv.js"></script>

[close]

I still need to add stuff like a queueing system.

[lakes]

Thanks to you both. I'll try it later.