Hi forum. I find this audio player in Codepen, and i would like to have the cover and the mp3 in local mode (like my Hype example). What is the code that allows me to view the files in the Resource Library?
Thanks in advance
Audioplayer_Local.zip (2.4 MB)
Can you clarify what you mean by "local mode?"
It seems to work just fine in a preview or exported and opened as a file:/// URL for me.
Do you mean to not use an HTML Widget/iframe at all for the player? Using the Hype audio element instead of your player? Or something else?
Hi Jonathan...you are always my savior!!!
Local mode i mean, i want to use this player in offline mode.
In script.js I see the code
cover: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/1.jpg",
source: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/mp3/1.mp3"
I need something like to replace the links
cover: ${resourcesFolderName}/1a.jpg
or
source: ${resourcesFolderName} A Fashion Electro Loop.mp3
the files in my Hypes resource library
Oh, I see now. While it does work, you want all local resources too (thus it can work offline).
So the ${resourcesFolderName} magic variable does not get substituted in files, but it turns out you don't need this anyways. You'll note that your index.html file itself uses relative paths which work like ./script.js and ./style.css. You can do the exact same thing in the script.js file. Because the index.html in the resources folder is in the resources folder, everything will just be next to it and you don't need to know the resources folder name.
Does that make sense?
(If for some reason you did need to use the ${resourcesFolderName} magic variable, I'd advise concatenating everything into the HTML Widget via changing its mode to Embedded HTML in the element inspector... but you don't need to do that in this case)
1 Like