Home Entrance Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
April 17, 2024 - @342.57 (what is this?)
Forum activity rating: Four Star Posts: 60/1k.beats Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts
News: :4u: ~~~~~~~~~~~  :4u:

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


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


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


View Profile WWW

First 1000 Members!Joined 2023!
« on: March 22, 2023 @270.47 »

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

Cele
Sr. Member
****

any way the wind blows


View Profile

First 1000 Members!Joined 2022!
« Reply #1 on: March 22, 2023 @356.13 »

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.
Logged
Melooon
Hero Member ⚓︎
*****


So many stars!

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

View Profile WWW

First 1000 Members!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 @555.66 »

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>
« Last Edit: March 22, 2023 @562.53 by Melooon » Logged


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


Hey, nice to meet you!


View Profile WWW

First 1000 Members!Cool Dude AwardJoined 2023!
« Reply #3 on: March 22, 2023 @620.22 »

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.
Logged

Quote
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

First 1000 Members!Joined 2023!
« Reply #4 on: March 22, 2023 @952.91 »

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!
 :transport:
« Last Edit: March 23, 2023 @202.26 by Moodle McDoodle » Logged

Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

GUIDE: Melon's Simple X3D World Tutorial

Started by MelooonBoard ✎ ∙ Art Crafting

Replies: 5
Views: 3751
Last post February 17, 2022 @637.75
by demonologi
Ozwomps Voyage - Playable edition development journal!

Started by MelooonBoard ⚛︎ ∙ MelonLand Projects

Replies: 21
Views: 5150
Last post February 27, 2022 @128.44
by ellievoyyd
What are you playing (or have finished)?

Started by ObspogonBoard ♖ ∙ Video Games

Replies: 145
Views: 13387
Last post July 01, 2023 @725.98
by shevek

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! Pixel Sea TamaNOTchi