Home Entrance Wiki Search Login Register

Welcome, Guest. Please login or register.
March 22, 2023, 04:57:47 am - @206.79
Forum activity rating: Four Star Posts: 92/24hrs Unread Topics | Unread Replies | Own Posts | Own Topics | Recent Posts
News: :ozwomp: Reminder: Forum messages stay readable for years! Keep yours high quality! :ozwomp:

+  MelonLand Forum
|-+  World Wide Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ Help & Tutorials
| | | |-+  HELP: HTML Midi Player


« previous next »
Pages: [1] Print
Author Topic: HELP: HTML Midi Player  (Read 97 times)
Inkerlink
Full Member ⚓︎
***
Posts: 102


Hey, nice to meet you!


View Profile WWW

Cool Dude AwardJoined 2023!
« on: March 12, 2023, 11:40:42 pm »

Hello everyone!
I'm trying to implement a MIDI player on to my website, but I'm having some issues.
This is the player in question: https://github.com/cifkao/html-midi-player

I add the script to my <head> as per the instructions, and add the midi-player element to my page. I set the src to a local .mid file I have in my site assets folder. Now, in VSCode, the midi player appears and the midi file plays fine! But when I go to try and open the html page in my browser (Vivaldi), the player shows up but it gives me a 'TypeError: Failed to fetch' tooltip on the player and the player is greyed out.
I tried searching for an answer on Google but wasn't able to find anything.
If I use the example .mid file they link on the github page, my browser is able to load THAT file and play that fine, so that tells me my .mid file is the problem? Or am I wrong?
How do I know what kind of .mid works or not?

I apologize if this is a dumb question, I'm still new to page coding.  :ohdear:

This is the code I've put in:
Code
  <midi-player src="assets/music/song.mid" sound-font></midi-player>

Note that I removed the optional visualizer code since I don't want a visualizer.
Logged

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



Necrosia
Jr. Member ⚓︎
**
Posts: 74


Lord of the Labyrinth


View Profile WWW

Welcome Soup!Joined 2023!
« Reply #1 on: March 13, 2023, 12:53:39 am »

Can you link us to the page in question where it's not working? With the broken player and all, from the way you mention it seems the files may be on inaccessible directories to one another but only seeing the real deal I can be sure  :unite:
Logged



Inkerlink
Full Member ⚓︎
***
Posts: 102


Hey, nice to meet you!


View Profile WWW

Cool Dude AwardJoined 2023!
« Reply #2 on: March 13, 2023, 02:37:24 am »

Can you link us to the page in question where it's not working? With the broken player and all, from the way you mention it seems the files may be on inaccessible directories to one another but only seeing the real deal I can be sure  :unite:

Here is a page with an example: https://144mb.neocities.org/1kb/1kb

So the weird thing is... now it seems to be working? I didn't change anything so I'm not sure why it works when published but doesn't when accessed locally... I dunno, I'm stumped.  :dunno:
Logged

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



/home/user/
Hero Member ⚓︎
*****
Posts: 673


Your friendly neighborhood directory

StatusCafe: sprinkles

View Profile WWW

666 Posts >:DJoined 2022!
« Reply #3 on: March 13, 2023, 11:46:06 am »

I'd bet it has something to do with the file path.

If you start a file path like that ("assets/music/music.mid") then that means it's going to search for a folder named assets in the current location you are in; for example, if you're in my.site/subpages/examplepage.html, then it will look for my.site/subpages/assets/music/music.mid.

If you use absolute paths, with a slash in front, paths that go from the very root of your page (in this example "/subpages/assets/music/music.mid") then you know exactly where it points to regardless of where the file is.

Maybe VSCode, your local file in the browser, and the finished page handle things differently or look in different directories for some reason.
Logged


Inkerlink
Full Member ⚓︎
***
Posts: 102


Hey, nice to meet you!


View Profile WWW

Cool Dude AwardJoined 2023!
« Reply #4 on: March 13, 2023, 02:41:28 pm »

The MIDI file is in the same directory as the page so envoking it should just be as simple as using the filename itself.
This is what I've got for the envokation:
Code
<midi-player src="m.mid">

The file structure locally and when published is exactly the same, so I'm not sure why it works in VSCode and when published online, but not when browsing locally. Very strange. Maybe it's something to do with the script itself?
Note that if you try and input a bad filepath for the MIDI, it gets a 'Bad MIDI file' error, instead of the Type Error, so I'm sure the filepath isn't the issue.
Logged

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



/home/user/
Hero Member ⚓︎
*****
Posts: 673


Your friendly neighborhood directory

StatusCafe: sprinkles

View Profile WWW

666 Posts >:DJoined 2022!
« Reply #5 on: March 13, 2023, 02:54:32 pm »

Note that if you try and input a bad filepath for the MIDI, it gets a 'Bad MIDI file' error, instead of the Type Error, so I'm sure the filepath isn't the issue.
Okay that definitely disproves my idea. I don't have any others though. :(
Logged


Melooon
Administrator
Hero Member ⚓︎
*****
Posts: 1272


So many stars!

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

View Profile WWW

1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!The Smallest Ozwomp Known To ManBug!
« Reply #6 on: March 13, 2023, 03:53:24 pm »

I didn't change anything so I'm not sure why it works when published but doesn't when accessed locally... I dunno, I'm stumped.
When you say access locally; do you mean on a local webserver like http://localhost or locally via file like file://index.html

Scripts almost never work using direct file:// ^^ Im not exactly sure why; but I think its to do with the security restrictions browsers place on JavaScript, if its not loading from a real URL, it gets very unhappy :ohdear:
Logged


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


Hey, nice to meet you!


View Profile WWW

Cool Dude AwardJoined 2023!
« Reply #7 on: March 13, 2023, 04:07:45 pm »

via file like file://index.html
Yeah the problem is only when via file. The preview in vscode uses local webserver i think (the address in it's bar is a 127 loopback address), so your explanation seems to fit.
Logged

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



Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

Iconic Video Game Songs [Player's Choice Award]

Started by NightdriftBoard © ∙ Music Room

Replies: 9
Views: 1034
Last post March 17, 2023, 07:00:11 pm
by chao2K
HTML Journal and the Neon Kiosk

Started by m15oBoard ✑ ∙ Writers Corner

Replies: 9
Views: 1635
Last post July 08, 2022, 08:37:31 pm
by m15o
HELP: Trying to create a sidebar in HTML

Started by wrinkledlionBoard ☔︎ ∙ Help & Tutorials

Replies: 3
Views: 691
Last post June 29, 2022, 02:55:58 am
by MamboGator

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | SMFPacks Super Quote 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!