World Wild Web > ☔︎ ∙ I need Help!

HELP: Simple but customisable way to play music?

(1/1)

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! :ha:

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!  :ozwomp:

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>

--- End code ---

Inkerlink:

--- Quote from: Melooon on March 22, 2023 @555.66 ---I wrote you a very simple little audio player you can customise with your own songs!  :ozwomp:

--- End quote ---

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:

--- Quote from: Melooon on March 22, 2023 @555.66 ---I wrote you a very simple little audio player you can customise with your own songs!
--- End quote ---

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!
 :transport:

Navigation

[0] Message Index