Eel
Eel copied to clipboard
Adding external media files in webpage
Describe the problem I want to add audio file which is not part of 'web' folder in my eel project. I am giving absolute path link as source in my html. But I am getting error in console "Resource not found"
Code snippet(s)
import eel
...
<html>
<audio controls=""> <source src="/home/user/workspace/voice/test.wav" type="audio/wav"> Your browser does not support the <code>audio</code> element. </audio>
</html>
Console error: Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8000/home/user/workspace/voice/test.wav
Note. When I load my html directly in browser, its working Desktop (please complete the following information):
- OS: Ubuntu
- BrowserChrome
- Version [e.g. 22]
How can I embed external media in my html while using eel? I can't change the path or copy audio files to my eel web folder as files are being dynamically generated by other code and I am using eel to view/play them.
As far as I understand what you need is to simply copy your media file into the same directory as your index.html and then load it via http://localhost:8080/test.wav. The port here is the port wherever eel is hosting your files, it might be different in dev and build environments (I am running React on 3000 for example, so in dev I use :3000 while live it would be :1234 which is the port eel runs on). However this only works for files you bundle with your app. I guess the reason is why you can't load are permissions, the browser can't just load any file from disk for obvious security reasons. In any case doing it this way you'd need file:// in front of it.