Home Entrance Wiki Search Login Register

Welcome, Guest. Please login or register.
June 10, 2023, 12:21:06 am - @972.99
Forum activity rating: Three Star Posts: 46/24hrs Unread Topics | Unread Replies | Own Posts | Own Topics | Recent Posts
News: :ha: Reminder: You don't owe anything! Just enjoy your time here! :ha:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ Help & Tutorials
| | | |-+  HELP: Simple but customisable way to play music?

« previous next »
Pages: [1] Print
Author Topic: HELP: Simple but customisable way to play music?  (Read 257 times)
Moodle McDoodle
Casual Poster ⚓︎

Just a sleepy lil' guy.. v__v { z z z )

View Profile WWW

Joined 2023!
« on: March 22, 2023, 06:29:29 am »

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!)

Sr. Member ⚓︎

any way the wind blows

iMood: jaffaprincess

View Profile WWW

Joined 2022!
« Reply #1 on: March 22, 2023, 08:32:50 am »

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.

Hero Member ⚓︎

So many stars!

SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!The Smallest Ozwomp Known To ManBug!
« Reply #2 on: March 22, 2023, 01:20:09 pm »

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.

<!-- 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>
    <button id="mk-juke-play" onclick="mkPlay()">Play!</button>
    <script src="https://www.midijs.net/lib/midi.js"></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) {
                mkJuke.play.innerHTML = "Play!";
                mkJuke.isPlaying = false;
            let song = mkJuke.select.value;
            if (song.includes(".mid")) {
            } else {
                mkJuke.audio = new Audio(song);
            mkJuke.isPlaying = true;
            mkJuke.play.innerHTML = "Stop!";
        mkPlay(); //Remove this line if you dont want it to autoplay
« Last Edit: March 22, 2023, 01:30:03 pm by Melooon » Logged

everything lost will be recovered, when you drift into the arms of the undiscovered
Full Member ⚓︎

Hey, nice to meet you!

View Profile WWW

Cool Dude AwardJoined 2023!
« Reply #3 on: March 22, 2023, 02:53:07 pm »

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

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.

It was in a way the world at the very beginning – the elements alone, and starlight.
-The Ionian Mission, Patrick O'Brian

Moodle McDoodle
Casual Poster ⚓︎

Just a sleepy lil' guy.. v__v { z z z )

View Profile WWW

Joined 2023!
« Reply #4 on: March 22, 2023, 10:52:11 pm »

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!
« Last Edit: March 23, 2023, 04:51:15 am by Moodle McDoodle » Logged

Pages: [1] Print 
« previous next »

Vaguely similar topics! (3)

GUIDE: Melon's Simple X3D World Tutorial

Started by MelooonBoard ✎ ∙ Making Games & Art Discussion

Replies: 5
Views: 2567
Last post February 17, 2022, 03:18:22 pm
by demonologi
Ozwomps Voyage - Playable edition development journal!

Started by MelooonBoard ☆ ∙ Showcase & Links

Replies: 21
Views: 4054
Last post February 27, 2022, 03:04:57 am
by ellievoyyd
What are you playing (or have finished)?

Started by ObspogonBoard ♖ ∙ Games Cafe

Replies: 135
Views: 10368
Last post June 07, 2023, 06:23:47 pm
by drakonic

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP2

MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery!