Home Entrance Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
December 09, 2023 - @553.53 (what is this?)
Forum activity rating: Four Star Posts: 73/1k.beats Unread Topics | Unread Replies | Own Posts | Own Topics | Recent Posts
News: :ha: ENTER THE PROFILE DESIGN CONTEST NOW!!! :ha:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  HELP: HTML Midi Player


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


Hey, nice to meet you!


View Profile WWW

First 1000 Members!Cool Dude AwardJoined 2023!
« on: March 12, 2023 @986.60 »

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
Full Member ⚓︎
***


Lord of the Labyrinth


View Profile WWW

First 1000 Members!spring 2023!Welcome Soup!Joined 2023!
« Reply #1 on: March 13, 2023 @37.26 »

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



 
Avatar by Urubu
Inkerlink
Full Member ⚓︎
***


Hey, nice to meet you!


View Profile WWW

First 1000 Members!Cool Dude AwardJoined 2023!
« Reply #2 on: March 13, 2023 @109.31 »

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



Guest
Guest
« Reply #3 on: March 13, 2023 @490.35 »

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 ⚓︎
***


Hey, nice to meet you!


View Profile WWW

First 1000 Members!Cool Dude AwardJoined 2023!
« Reply #4 on: March 13, 2023 @612.13 »

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



Guest
Guest
« Reply #5 on: March 13, 2023 @621.20 »

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
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 #6 on: March 13, 2023 @662.08 »

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 ⚓︎
***


Hey, nice to meet you!


View Profile WWW

First 1000 Members!Cool Dude AwardJoined 2023!
« Reply #7 on: March 13, 2023 @672.05 »

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: 20
Views: 1992
Last post August 09, 2023 @673.87
by wygolvillage
HTML Journal and the Neon Kiosk (Easy RSS feeds for site news)

Started by m15oBoard ⚛︎ ∙ Share your Resources

Replies: 12
Views: 2564
Last post April 24, 2023 @816.79
by shevek
HELP: Trying to create a sidebar in HTML

Started by wrinkledlionBoard ☔︎ ∙ I need Help!

Replies: 3
Views: 972
Last post June 29, 2022 @80.53
by Guest

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