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
Related
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.
I want to display a little message to the user if it hits the play button, for him to know the song is loading (because there isn't any loading indicator natively in browsers).
I'm not using preload="auto" or "metadata" because the server was getting too much traffic, and not all users are going to listen to the these audios.
It takes about 5 seconds for the audio to start playing (it seems it has to download at least 1 or 2 Mb of the audio to really start playing), so I wanted this message to be shown while the audio is loading (or the metadata is loading), or at least show this for 5 seconds after the user clicks on the play button and then hide it.
How can I do that?
AudioElement fires event loadstart, just use it:
myAudio.addEventListener("loadstart", function () {
console.log(‘start loading ...’)
},false);
function message()
{
$('#msg').css({
"display":"block"
})
setTimeout(hide, 5000);
}
function hide()
{
$('#msg').css({
"display":"none"
})
}
.msg{
display:none
}
<body>
<audio controls onclick="message()">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<label id ="msg" class = "msg">Loading Please wait..</label>
</body>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
Here's my goal: To have autoplay audio stopped when a Zurb Modal window disappears.
I'm new with doing this stuff, especially javascript!
I have a Zurb Modal window functioning as a splash screen that pops up on page load. I have HTML5 audio in the window that autoplays (it was a request - I don't like autoplay!). The window disappears when the background is clicked, but the audio continues to play. I don't know how to get the audio to stop! If anyone has an idea, I'd really appreciate hearing about it.
<script type="text/javascript" src="js/jquery.reveal.js"></script>
<div id="myModal" class="reveal-modal">
<audio controls="controls" autoplay="autoplay">
<source src="audio/splash-loop-01.mp3" type="audio/mpeg">
<source src="audio/splash-loop-01.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
<div class="close-reveal-modal">CLOSE ME</div><!-- USE THIS TO CLOSE WINDOW -->
<script>
$(document).ready(function (){
$('#myModal').reveal();
});
</script>
$(document).ready(function (){
$('.close-reveal-modal').click(function(){
audioPlayer.pause();
audioPlayer.src = '';
audioPlayer.load();
});
});
To pause the audio, place this in your document.ready:
$('.close-reveal-modal').click(function(){
var myAudio = document.getElementsByTagName("audio")[0];
if(myAudio != undefined){
myAudio.pause();
}
}
I am trying to insert the same song into 2 different sources on my audio player using javascripts 'getElementByID'.
HTML:
<audio id="audio">
<source id="ogg" src="song1.ogg" type="audio/ogg">
<source id="mp3" src="song2.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
JavaScript:
function songOne(){
document.getElementById('ogg').src="../audio/pt/lllg/Panda's Thumb.ogg";
document.getElementById('mp3').src="../audio/pt/lllg/Panda's Thumb.mp3";
document.getElementById('songName').innerHTML="Panda's Thumb";
audio.play();
}
As you can see, when the function runs, it places the .ogg file into the id="ogg" and the .mp3 into the id=".mp3". Though, when I inspect the element the source has changed but the song will not play.
I can get it to work with only one source:
<audio id="audio" src=""></audio>
But then it will only play on browsers that support mp3 or ogg and the others miss out.
What am i doing wrong?
I don't know much about HTML5 Audio, but try this:
After you change the src attr, issue a audio.load(); command
Check this article: http://html5doctor.com/native-audio-in-the-browser/
This plugin can make a video to play as your site's favicon by using this code:
var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');
here's the Github page.
I tried to make the video play automatically without any input but
unfortunately I couldn't get it to work with my site.
P.s: I'm just a beginner so if anybody have any suggestions or maybe a fiddle to work it out that'll be great!
Did you try using the video.play() feature? See: http://www.w3schools.com/tags/av_met_play.asp
Since I don't have your video to test out, perhaps you could try this?
favicon.video(video.play());
Or adding the "autoplay" keyword to the video tag. See: http://www.w3schools.com/tags/att_video_autoplay.asp
<video id="videoId" controls autoplay>...</video>
Then add an onended event for the video, so that it stops after the video finishes playing. Otherwise, it may try to stop right after the favicon.video(video); function, thus giving the illusion that it's not starting to play at all. It's probably starting & then a few milliseconds later, stopping.
video.onended = function() {
favicon.video('stop');
};
(Mobile Note: From experience with building video players, I've discovered that auto-play won't work on all mobile devices. Apple blocks it due to prevent websites from automatically consuming a user's monthly alloted bandwidth. So mobile users have to press the video play button, to start videos on iPhones & iPads.)
You need to add a <video> to your html
here's a sample code
<video id="videoId" width="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Video tag not supported. Download the video here.
</video>
EDIT
The secret to getting this working is having the video on the same domain and not loading it from other domain.
Also, you need to add a shortcut icon in the title beforehand
so in your title you need to add this
<link rel="shortcut icon" type="image/png" href="icon.png">
having it in png is the key Here's an example. Have a look https://j99.in/favicon
This may be helpful to you
HTML autoplay Attribute
<video controls autoplay>
sample script
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
sample html:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
For reference:click me