HELP: HTML Midi Player

Inkerlink
Full Member ⚓︎

Hey, nice to meet you!

⛺︎ My Room

HELP: HTML Midi Player

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

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

⛺︎ My Room

Re: HELP: HTML Midi Player

« 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


	Logged

Avatar by Urubu

Inkerlink
Full Member ⚓︎

Hey, nice to meet you!

⛺︎ My Room

Re: HELP: HTML Midi Player

« Reply #2 on: March 13, 2023 @109.31 »

Quote from: Necrosia 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

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.


	Logged

Quote

It was in a way the world at the very beginning – the elements alone, and starlight.

-The Ionian Mission, Patrick O'Brian

Memory
Guest

Re: HELP: HTML Midi Player

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

⛺︎ My Room

Re: HELP: HTML Midi Player

« 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

Memory
Guest

Re: HELP: HTML Midi Player

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

Quote from: Inkerlink on March 13, 2023 @612.13

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!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood:

Itch.io: My Games

...

Re: HELP: HTML Midi Player

« Reply #6 on: March 13, 2023 @662.08 »

Quote from: Inkerlink on March 13, 2023 @109.31

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


	Logged

everything lost will be recovered, when you drift into the arms of the undiscovered

Inkerlink
Full Member ⚓︎

Hey, nice to meet you!

⛺︎ My Room

Re: HELP: HTML Midi Player

« Reply #7 on: March 13, 2023 @672.05 »

Quote from: Melooon on March 13, 2023 @662.08

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]

« previous next »

Vaguely similar topics! (3)