HELP: Simple but customisable way to play music?

[Moodle McDoodle]

I've been losing my mind trying to figure this out so I figured it's time to give up and ask for help!

I want a way to play play music using midis or mp3s on my site (preferably midis but I can use mp3 files instead if its easier). I need something that's simple and customisable enough that I can fit it into my sidebar and site aesthetic, like being able to change the size and colour or having a clickable image. But I don't really know anything about javascript so trying to figure out how to use and customise pre-built music players or parse through responses to similar questions on stackflow that just give the code without much direction on how to actually implement it is genuinely headache inducing ;__;

Would be happy with with either of these

• Step-by-step, javascript noob friendly guide on playing audio with a custom button
• Reccomendations on a simple music/midi player + how to customise it

If someone could please help I'd be sooo grateful!! ;w; here's the link to my site so you can see the size of the sidebar where i'd be putting this (the div is invisible but it'd go either above or below the cbox!)

[Cele]

Do you need a player that only plays one song or multiple?

As for midis, I tried to do that before but in the end, I ended up just recording the midi song into mp3 and that ended up being easier.

[Melooon]

I wrote you a very simple little audio player you can customise with your own songs! 

It lets you play and pause, select multiple songs, supports most audio files and even plays midi files! By default, it will auto-play the first song but you can disable that by removing the last line of code!

To add your own music, just add <options> like the two examples below! The files can be from any site or local on your site!

It has limits; it wont auto stop, it wont loop, and it wont auto play the next song; if you need those ask and I'll help you figure it out. Also, you can replace the Play button with an image if you like - just put "onclick="mkPlay()" on your image and hide the button.

Code

<!-- Melon's Mini Jukebox - Plays MIDIs, MP3s and most audio files -->
<div id="mk-juke">
    <select id="mk-juke-select">
        <!-- Put your music here as options, make sure the first has "selected" -->
        <option selected value="https://www.midijs.net/midi/hinematov.mid">Midi Example</option>
        <option value="https://melonking.net/audio/night_river.s3m.mp3">MP3 Example</option>
    </select>
    <button id="mk-juke-play" onclick="mkPlay()">Play!</button>
    <script src="https://www.midijs.net/lib/midi.js"></script>
    <script>
        var mkJuke = {};
        mkJuke.select = document.getElementById("mk-juke-select");
        mkJuke.play = document.getElementById("mk-juke-play");
        mkJuke.isPlaying = false;
        mkJuke.audio = new Audio();
        function mkPlay() {
            if (mkJuke.isPlaying) {
                MIDIjs.stop();
                mkJuke.audio.pause();
                mkJuke.play.innerHTML = "Play!";
                mkJuke.isPlaying = false;
                return;
            }
            let song = mkJuke.select.value;
            if (song.includes(".mid")) {
                MIDIjs.play(song);
            } else {
                mkJuke.audio = new Audio(song);
                mkJuke.audio.play();
            }
            mkJuke.isPlaying = true;
            mkJuke.play.innerHTML = "Stop!";
        }
        mkPlay(); //Remove this line if you dont want it to autoplay
    </script>
</div>

[Inkerlink]

I wrote you a very simple little audio player you can customise with your own songs! 

Holy smokes Melon, you're amazing! I'll definitely take a look at this when I get home today as well. The more MIDI players the better imho.

[Moodle McDoodle]

I wrote you a very simple little audio player you can customise with your own songs!

AHHH THIS IS SO NICE!!!! THANK YOU!!! This is way more than I was expecting, thank you so much! ;__; I can't wait to test this out in a little bit. If I run into any issues I'll let you know! The music looping would be nice, but I'll get this set up and working first before I worry about that :)

EDIT: I just finished adding this code to my site and it works great! I might still try to figure out how to make it loop later on, but for now I'm fine without it I think. I actually kinda like that it encourages listening to the different midis in the menu instead of just one on loop! The music player was so easy to implement and style compared to everything else I've tried!! I'm really grateful, thanks again Melon!
 

[candycanearter07]

I wrote you a very simple little audio player you can customise with your own songs! 

It lets you play and pause, select multiple songs, supports most audio files and even plays midi files! By default, it will auto-play the first song but you can disable that by removing the last line of code!

To add your own music, just add <options> like the two examples below! The files can be from any site or local on your site!

It has limits; it wont auto stop, it wont loop, and it wont auto play the next song; if you need those ask and I'll help you figure it out. Also, you can replace the Play button with an image if you like - just put "onclick="mkPlay()" on your image and hide the button.

Code

<!-- Melon's Mini Jukebox - Plays MIDIs, MP3s and most audio files -->
<div id="mk-juke">
    <select id="mk-juke-select">
        <!-- Put your music here as options, make sure the first has "selected" -->
        <option selected value="https://www.midijs.net/midi/hinematov.mid">Midi Example</option>
        <option value="https://melonking.net/audio/night_river.s3m.mp3">MP3 Example</option>
    </select>
    <button id="mk-juke-play" onclick="mkPlay()">Play!</button>
    <script src="https://www.midijs.net/lib/midi.js"></script>
    <script>
        var mkJuke = {};
        mkJuke.select = document.getElementById("mk-juke-select");
        mkJuke.play = document.getElementById("mk-juke-play");
        mkJuke.isPlaying = false;
        mkJuke.audio = new Audio();
        function mkPlay() {
            if (mkJuke.isPlaying) {
                MIDIjs.stop();
                mkJuke.audio.pause();
                mkJuke.play.innerHTML = "Play!";
                mkJuke.isPlaying = false;
                return;
            }
            let song = mkJuke.select.value;
            if (song.includes(".mid")) {
                MIDIjs.play(song);
            } else {
                mkJuke.audio = new Audio(song);
                mkJuke.audio.play();
            }
            mkJuke.isPlaying = true;
            mkJuke.play.innerHTML = "Stop!";
        }
        mkPlay(); //Remove this line if you dont want it to autoplay
    </script>
</div>

hey so i had a question about this uh why are you assigning {} to mkJuke here? also what is let song and how is that different to var?

i /think/ i understand the rest of the code tho

[Melooon]

assigning {} to mkJuke here? also what is let song and how is that different to var?

Aha, now this is a good question

mkJuke is being assigned as an object; this is a little different form a variable ~ a variable is like a drawer you put a single item in; while an object is more like a chest of drawers that can have many kinds of items within them.

So in this case we make an object called "mkJuke", then we make child variables within it called "mkJuke.select", "mkJuke.play" etc.

An alternative approach would be to give each variable its own definition like "jukeSelect", "jukePlay" etc ~ if I did that then those variables would be child variables of the pages root object (an invisible object that always exists on every page), instead of the mkJuke object.

Both approaches world work just as well; all we are doing is adding an extra object between the root and my variables; but its a little cleaner to use less root variables; it reduces the risk of clashing variables names when you have multiple scripts and it can potentially help the browser manage its ram better.

In this case I used the mkJuke object approach because I didn't know how messy the code on peoples sites would be, and I want to maximize the chances of the script working for people