How to use JavaSript with Flask to play mp3? - javascript

I'm trying to play an mp3 file from JavaScript in a Flask framework.
Inside of the js file, I have:
let audio = new Audio('bell.mp3');
audio.play();
I'm getting a 404 error so it can't find the mp3 file.
My project folders look like this:
main.py
templates
home.html
Static
Scripts
script.js
bell.mp3
I also tried to put the bell.mp3 file in templates and in the root folder, but it still can't find it. How do I access it through javascript with the flask framework? I just found out I have to put js and css into a Static folder for flask and I still don't really know why so I'm wondering if I have to do something else weird like that.

You don't need Flask or JS to play mp3, it's built in browser. You can use HTML to serve a player for your audio https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
<audio src="{{ url_for('static', filename='Scripts/bell.mp3') }}" autoplay>
Download OGG audio.
</audio>

Try to paste this code in your html file (it isn't useful if you have firefox or opera):
<audio src="../Static/Scripts/bell.mp3" controls="controls">

Related

Display office files or pdf files using ViewerJS in a Django template

I'm trying to use ViewerJS in a Django 3.1 application in order to display office documents or pdf's within a Django template.
The url I created is
http://localhost:8000/static/js/ViewerJS/index.html/#..media/files/Materials.pdf
This generates this:
That is, it lifts the index.html file but no more than that. When I look at the developer console -> networks I see that many items of viewer js are not found, I understand that this is why the presentation fails.
ViewerJS is located in static/js/ViewerJS
In the template I have tried these two ways:
Preview
<iframe src = "/static/js/ViewerJS/index.html/#../media/archivos/Materiales.pdf" width='700' height='550' allowfullscreen webkitallowfullscreen></iframe>
If you know of another solution by which I can do what I need and it is not ViewerJs, it is welcome.
But neither works.
For PDF file I use PDF.js. Just download the source in your static folder and point the pdf to the viewer.
like this:
<iframe src="{% static 'assets/pdfjs/web/viewer.html' %}?file={{your.file.url}}" width="100%" height="100%" frameborder="0">
It worked for me for pdf.
It won't work for office files.

Play video from javascript file

I want to make HTML mini-game and insert a short video in the end.
But any video format is not allowed to include in final archive for uploading this game (only .html, .css, .js, .jpeg, .jpg, .png).
Is it possible to hardcode video file (mp4) directly into .js file anyway?
For now I am thinking of few solutions:
Just change extension of video.mp4 file to video.js and then try to set proper MIME type to play this video in HTML. Is it even possible?
Covert video.mp4 file into Json data and insert this data into .js file and then play somehow. I found this converter but it seems doesn't work and I can't find any info how to play converted to Json video in HTML.
Search for WebAssembly solutions.
Is there some reliable way to embed video into javascript file?
You can use base64 encoded video
<video>
<source type="video/mp4" src="data:<your encoded video>" />
</video>

Video file won't play using jwplayer

I'm not a professional, I'm doing a blind imitation
I created and memorized the m3u8 file
This is what it contains
#EXTM3U
#EXT-X-VERSION:6
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-TARGETDURATION:3
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-ALLOW-CACHE:YES
#EXTINF:3.000,
lo-1.ts
#EXTINF:3.000,
lo-2.ts
However, when I uploaded it to the storage puller and created the link to run it on the web, it didn't work
What should I add and how, for the video to work
This is my link
jsfiddle
<script type='text/javascript' src='https://content.jwplatform.com/libraries/0P4vdmeO.js'></script>
<div id="myElement"></div>
<script>
jwplayer("myElement").setup({
file: "https://okoshiyasu.000webhostapp.com/lo.m3u8",
});
</script>
"I uploaded the .ts file to the same domain and I modified the file like #EXTINF:3.000, lo-1.tsBut the problem remains"
There is something wrong with your file host (maybe in settings?). Instead of giving raw file bytes, it instead gives a text version of the file bytes.
For example, when using Chrome, try to open these links in a new tab:
1) Your host: https://okoshiyasu.000webhostapp.com/lo-1.ts = shows text in tab (wrong result).
2) Github test: https://vcone.github.io/public/demos/Mpeg_TS/lo-1.ts = downloads file (correct result).
Becase the file bytes are downloaded (not written text on page) this mean the HLS player gets the data correctly and can now play the video.
Example playback (where .ts file is served from Github):
https://vcone.github.io/public/demos/Mpeg_TS/VC1_Demo_LO_01.html
Solution:
Find a way to fix these links of your .ts file(s) to auto-download to disk. When that is fixed, then the file is also now playable by HLS players. Maybe you can set file type settings if possible? Right now it acts like you uploaded a web page (or text) instead of binary data (file bytes). Maybe it is not allowed for their free space? Check with 000webhostapp.com Admins or forums.

HTML Music Player - Absolute file location (i.e. C:\song.mp3)

Good morning,
I have put together a music player using modified examples on SO. My player plays songs fine if the file is located within the website's directory, however I wish to change it so that the source can exist anywhere on the server. I have looked on here for examples of this however the ones I find either don't work or do not apply to my situation.
Currently I have this line:
<audio id="audio-player" src="media/song.mp3" type="audio/mp3" controls="controls"></audio>
which plays the file located within the folder media in the website directory.
What I want is something like this:
<audio id="audio-player" src="C:\song.mp3" type="audio/mp3" controls="controls"></audio>
Currently I am doing it with HTML and JS but am open to any suggestions. All I really care about is that I can make a music player that can play files from any location, regardless of how this is done.
Thanks for your time.
When the url is C:\song.mp3 you tell the user to access THEIR local C drive. you need to create a proxy webpage that accesses files that are not in your local web root (public_html). So you can create a webpage in your local webroot that has the following code :
proxy.php
<?php
header("Content-Type: audio/mp3");
echo file_get_contents("C:\\audio\\" . $_GET["name"] . ".mp3");
?>
If you wanted to access the desired audio file you would go to the url proxy.php?name=song. Like so
<audio id="audio-player" src="proxy.php?name=song" type="audio/mp3" controls="controls"></audio>
You should also prevent any "..\" and possibly "~" so they cant access parent folders.
Browsers cannot access arbitrary files on the server's file system. You can't give a Windows file path on the server.
You need to:
Make the file available over HTTP
Give the URL to that file

Cannot play audio file on web page

I am trying to play an audio file when a timer counts down to zero. The problem is that I receive the following message once the code is loaded:
HTTP "Content-Type" of "audio/mpeg" is not supported. Load of media resource https://www.xxx.com/sounds/beep.mp3 failed.
All candidate resources failed to load. Media load paused.
I am loading the page using jQuery Ajax call. All other HTML and javascript returned by the call works fine.
I have tried multiple .wav and .mp3 files without luck.
The html related to sound is:
<audio id="soundSrc">
<source src="/images/beep.mp3"></source>
</audio>
Which is initialized with:
var soundFile = $('#soundSrc');
It is played with:
soundFile[0].play();

Categories

Resources