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();
Related
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">
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>
var imgs=document.images.length;
It can extract all the images on the web page.
How extract all the flv files whose suffix is flv such as sample.flv in the web page with js?Not all the flv files on my local directory but web page.
The plugin Video DownloadHelper in firefox can get the current mp4 file.
Why my js code can't do the same task?
var Links = document.querySelectorAll('a[href$=".mp4"]');
console.log(Links);
How to extract the current video files with js such as the plugin Video DownloadHelper in firefox?
Yahoo Movies use blob stream to transfer video data. There are no direct mp4/flv links anywhere, nor can you get such links directly. The src of the <video> tag refers to a blob stream link:
<video class="yvp-html5-video" preload="" id="2413371376" src="blob:https://www.yahoo.com/1dfafd99-a1ff-4cc8-bcff-255e69db9977"></video>
When you hit to download MP4 from Video DownloadHelper, the plugin actually reads the blob stream and writes it to disk in an MP4 file. It doesn’t download a MP4 file. If you try to Copy URL, you’ll get something like this to your clipboard:
https://roarack01.vpg.cdn.yimg.com/yahoomovies/61fb473f-04a2-381e-b2ae-9496dfba5e66_VYtMtix1DscECbXMT9tHT7yf2P9BZF-mRCMjBejFgALFHl7NSm1ZXPOMICAOr949v2xUgEASYLw-_1_0_vtt.m3u8?a=yahoomovies&ib=sapi&m=application%2fvnd.apple.mpegurl&mr=0&ns=c+i+ci+cii&vid=61fb473f-04a2-381e-b2ae-9496dfba5e66&x=1479599999&s=370695a7063b6aae06fb7f537c85773a
You can record a blob stream, but it’s not an easy task.
For more details on video blob stream, check these links:
What is blob in the <video src=blob:url>?
Export HTML5 blob video to MP4
W3C Media Source Extensions
A URL for Blob and File reference
If I'm understanding correctly you want to look for all the links which have an associated .flv.
If you want this, you can use querySelectorAll and select all the links ending in .flv using the css selector $=.
var flvLinks = document.querySelectorAll('a[href$=".flv"]');
to get all flv files of a directory, please try the following code -
var files = fs.readdirSync("YOUR_DIRECTORY");
var path = require('path');
for(var i in files) {
if(path.extname(files[i]) === ".flv") {
//do your desired task here
}
}
Hope it helps..:)
You can inspect all video requests on Chrome -> Networks tab in Media sub tab.
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
While using HTML5 audio tag, i am having a problem.
I am using icecast2 server to stream my music.
But the problem is, browser saves the buffer when stream is played. So when the player is paused or the page is refreshed, instead of asking server for the fresh stream, it plays the previously saved buffer only.
As i am playing live stream, i want always fresh stream to be played. What can i do to ensure that??
What i found after browsing is- HTML5 Video: Force abort of buffering
So creating a new audio tag is an option but i am not clear on it and also i dont know if it is a good way.
Probably the most common way to prevent caching of any HTTP resource (text files, images, audio, etc) is to append a meaningless random GET parameter onto the URL. So if your URL is like this:
http://musicserver.com/livestream.mp3
Then you'd do something like this:
http://musicserver.com/livestream.mp3?nocache=12034981237
Where the value of nocache is randomly generated each and every time. Then the browser will treat it as a new unique resource/file.