So I have a very simple code which worked yesterday. I get back on the computer this morning and it looks like it does not work anymore.
What I checked:
Whether or not my function runs onload (it does)
If the path for the audio file is correct (it is)
I tried putting the src directly in the audio tag (and deleting the onload call just to make sure). It still does not work.
The code:
HTML:
<body onload="startMusic()">
<audio id="audio" autoplay loop>
Your browser does not support HTML5 audio.
</audio>
<!--rest of the page-->
JS:
const audio = document.getElementById("audio");
function startMusic(){
audio.src = "./audio/myFile.mp3";
}
I don't have any console error.
Thank you for your time.
Related
I'm trying to play an audio when page is loaded, it should be really simple however i can't accomplish it.
The problem is that it is not playing, i tried checking the state of autoplay (True/False) and it says it does playing when page is loaded although it does not, also tried making a function which will change the auto play state to True but it didnt do anything ...
<html>
<head >
<audio controls autoplay id='myAudio'>
<source src="..//sounds//firstpagesong.mp3" type="audio/mp3">
<source src="..//sounds//firstpagesong.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</head>
<body onload="tryy()">
<p id="demo"></p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = document.getElementById("myAudio").autoplay;
document.getElementById("demo").innerHTML = x;
}
function tryy()
{
var audio = document.getElementById("myAudio");
audio.autoplay = true;
audio.load();
}
</script>
</body>
Also looked up for similar question here and tried thier solution as well but none of them worked.
I'm trying to play an audio when page is loaded, it should be really simple...
Yeah, well, it isn't. Autoplay with sound is largely disabled in all mainstream browsers these days.
See also: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
I wrote a page , and found addEventListener("loadedmetadata",fun) doesn't run correctly on firefox
I'm trying fixing a bug of a old software .While loading video and page, the software try to draw some player-controller on the page .It worked well on Chrome and IE , but fail to draw some player-controller on Firefox .I tried debuging days until I found problem can simplify like this :
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" width="320" height="176" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
alert("The vid");
vid.addEventListener("loadedmetadata", getmetadata);
function getmetadata()
{
alert("Meta data for video loaded");
}
</script>
<p>test</p>
</body>
</html>
I expected firefox(41.0.1) to alert twice with ("The vid") and ("Meta data for video loaded") , but it didn't.
These code run correctly on chrome 45 and IE11 .Both of these browers alert twice with ("The vid") and ("Meta data for video loaded") as I expected .
Is it a bug of firefox ? How can I avoid this problem ?
I just tired vid.addEventListener("canplay", getmetadata); and got the same result .
It seems the problem is about 'addEventListener'
The video was loaded . I can use vid.play to play it . I also used console.log(vid) to see if the DOM was right , and it was .
It seems addEventListener skip watching "loadedmetadata" and "canplay" , and I don't know why .
I just tried .oncanplay and .onloadedmetadata ,and found it was not the addEventListener ,but the Event caused this problem .
While something (e.g. alert()) disturbed the loading , Firefox couldn't get the Event . So if the video came out to be 'On Loadedmetadata' or 'On Canplay' in the moment , firefox didn't catch up it . After that , the video is loadedmetadata or canplay .It's the attributes , not the event .Firefox misses the event , and rushes forward .
Finally I use console.log(vid.readyState) and found a solution .
While loading a page , firefox is so fast that it rush in a hurry while chrome and ie are waiting for something .
At the moment vid.addEventListener("loadedmetadata", getmetadata) , vid.readyState come out to be more than 2 in firefox , while on chrome and ie , vid.readyState is still 0.
readyState 0 means 'No information is available about the media resource' .
readyState 2 means 'Data is available for the current playback position, but not enough to actually play more than one frame' , the same like 'loadedmetadata'.It's not an event , but a property.
I changed the code like this to check if the brower rushed too fast to miss the event 'loadedmetadata'.
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" width="320" height="176" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
alert("The vid");
vid.addEventListener("loadedmetadata", getmetadata);
if (vid.readyState >= 2) {
getmetadata();
}
function getmetadata()
{
alert("Meta data for video loaded");
}
</script>
<p>test</p>
</body>
</html>
For more informaion about readyState : https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState
I faced the same problem and got a solution. I used loadeddata event instead of loadedmetadata event and it worked for me.
In the Definitive Guide Javascript book it says loadeddata event means:
Data for the current playback position has loaded for the first time,
and readyState has changed to HAVE_CURRENT_DATA.
And HAVE_CURRENT_DATA means:
Media data for currentTime has been loaded, but not enough data has
been loaded to allow the media to play. For video, this typically
means that the current frame has loaded, but the next one has not.
This state occurs at the end of a sound or movie. It has readyState
property of value "2".
I hope my answer makes it clear:
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" width="320" height="176" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
alert("The vid");
// here I used "loadeddata" event and worked very well♥
vid.addEventListener("loadeddata", getmetadata);
function getmetadata() {
alert("Meta data for video loaded");
}
</script>
<p>test</p>
</body>
</html>
I am making a html webpage which needs to run ONLY LOCALLY(Offline Website). Using "input file tag", user selects and gives the video file path that needs to be played. For the video player I am using the Video tag of html.
I tried doing this with the below code but the video is not playing.
Please help me.
Note: It is an OFFLINE website.
CODE:
<html>
<head>
<script>
function func() {
var videolink = document.getElementById('fileID');
var player = document.getElementById('videoID');
var mp4Vid = document.getElementById('sourceID');
$(mp4Vid).attr('src',videolink);
player.load();
player.play();
}
</script>
</head>
<body>
<input type="file" id="fileID" />
<input type="button" onClick="func();"/>
<center>
<video id="videoID" width="320" height="240" controls autoplay>
<source id="sourceID" type="video/mp4">
</video>
</center>
</body>
</html>
try change this:
$(mp4Vid).attr('src',videolink);
on that:
$(mp4Vid).attr('src', '' + videolink).appendTo($('#sourceID'));
You cannot with JavaScript alone, except on modern browsers.
The Issue
It's a Web browser security feature to obsure the full path of file uploads. If you attempt to read the value of a file upload field, you'll receive something like this:
$('input[type="file"]').val(); // "C:\fakepath\some_file.mp4"
Even if in this hypothetical the file exists on my desktop (e.g., ~/Desktop/some_file.mp4).
The Workaround
On modern browsers, see "In HTML5 how to show preview of image before upload?" for using FileReader on the file input and using its source. Otherwise, you can likely do so using Adobe Flash, where installed.
i have written some simple html and javascript that should play a sound file. The page displays the two buttons but when i click the play button it does nothing . I know that my browser can play my mp3 file because it works with just the audio tag ex:
<audio src="soundtest.mp3" ></audio>
If anyone could tell me what i am doing wrong i would greatly appreciate it.
<!DOCTYPE html>
<html>
<body>
<button onclick="playSong()" type="button">play</button>
<button onclick="pauseSong()" type="button">pause</button>
<br>
<audio id="audio1">
<source src="soundtest.mp3" type="audio/mp3" >
Your browser does not support the audio tag!
</audio>
<script>
var mySong=document.getElementById("audio1");
function playSong()
{
mySong.play();
}
function pauseSong()
{
mySong.pause();
}
</script>
</body>
</html>
There are a few things to try. First and foremost, check mySong.canPlayType("audio/mpeg"). It should return "maybe". If it does not, your browser doesn't support MP3 and you should try a different one.
Then, the <audio> tag's type attribute should be audio/mpeg, not audio/mp3. MIME type is important.
So important, in fact, that if it still doesn't work you should check to ensure that the server is configured to serve .mp3 files with the audio/mpeg MIME type header.
If this still doesn't work... try turning the speakers on :p I'm kidding, if you still have problems after these steps, let me know.
How can I play a sound file when the onload event fires using JavaScript?
For example:
If I have a webpage, when a user clicks on a button and this will pop-up a window. While the pop-up window is loading, the page will play a sound file.
Add a HTML5 audio element into your document:
<audio id="foobar" src="yoursample.ogg" preload="auto">
Set it hidden via CSS:
#foobar { display: none }
On the any JavaScript event handler play the audio:
var sample = document.getElementById("foobar");
sample.play();
For more information
https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video
Depending on your web application purpose you might want to support old browsers:
http://www.misfitgeek.com/play-sound-in-html5-and-cross-browser-support-with-backward-compatability/
Try this:
//store the audiofile as variable.
var popupsound = document.getElementById("notifypop");
function autoNotify() {
popupsound.play(); //play the audio file
}
#notifypop{ display:none;}
<body onload="autoNotify()"> <!--Play the audio file on pageload -->
<audio id="notifypop"> <!--Source the audio file. -->
<source src="path/sound.ogg" type="audio/ogg">
<source src="path/sound.mpeg" type="audio/mpeg">
</audio>
<script src="path/sound.js" type="text/javascript"></script><!--Load your javascript sound file.-->
</body>
Learn more about HTML5 media formats
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
One way to do it would be to insert HTML audio tags onclick and set them to automatically start:
http://webdesign.about.com/od/sound/a/play_sound_oncl.htm