I have an engine song in autoplay and i want that when i click on my button the sound turn off "progressively" for get a fluid diminution of the volume and finish at 0.1 or 0.2 of the volume, someone have an idea ?
This is my actual code:
<audio autoplay>
<source src="../audio/2445.mp3">
</audio>
<button>turn off</button>
not sure if this is right way to do it, you could do something like:
<audio autoplay id='aud'>
<source src='http://upload.wikimedia.org/wikipedia/commons/5/5b/Ludwig_van_Beethoven_-_Symphonie_5_c-moll_-_1._Allegro_con_brio.ogg'>
</audio>
<button id='btn'>turn off</button>
JS:
var audio = document.getElementById('aud'), interval;
document.getElementById('btn').onclick = turnOff;
function turnOff(){
if(audio && !audio.paused){
interval = setInterval(function(){
console.log('audio volume: ', audio.volume);
if(!audio || audio.paused || audio.volume < 0.1){
clearInterval(interval);
}else{
audio.volume -= .05; // change this value as per your liking
}
}, 200); // change this value as per your liking
}
}
I guess a better way to do it might be with web-audio.
Fiddle Demo
Related
I am adding multiple HTML5 videos onto a webpage.
The code I am replicating is from this recommended accessible approach. http://jspro.brothercake.com/audio-descriptions/ The video plays fine, and audio captions work, but when I add a new video to the same page the second video does not play the audio captions at all. Does anyone have suggestions on how I can fix this issue?
<video id="video" preload="auto" controls="controls"
width="640" height="360" poster="./media/HorribleHistories.jpg">
<source src="./media/HorribleHistories.mp4" type="video/mp4" />
<source src="./media/HorribleHistories.webm" type="video/webm" />
</video>
<audio id="audio" preload="auto">
<source src="./media/HorribleHistories.mp3" type="audio/mp3" />
<source src="./media/HorribleHistories.ogg" type="audio/ogg" />
</audio>
<script type="text/javascript">
(function()
{
//get references to the video and audio elements
var video = document.getElementById('video');
var audio = document.getElementById('audio');
//if media controllers are supported,
//create a controller instance for the video and audio
if(typeof(window.MediaController) === 'function')
{
var controller = new MediaController();
audio.controller = controller;
video.controller = controller;
}
//else create a null controller reference for comparison
else
{
controller = null;
}
//reduce the video volume slightly to emphasise the audio
audio.volume = 1;
video.volume = 0.8;
//when the video plays
video.addEventListener('play', function()
{
//if we have audio but no controller
//and the audio is paused, play that too
if(!controller && audio.paused)
{
audio.play();
}
}, false);
//when the video pauses
video.addEventListener('pause', function()
{
//if we have audio but no controller
//and the audio isn't paused, pause that too
if(!controller && !audio.paused)
{
audio.pause();
}
}, false);
//when the video ends
video.addEventListener('ended', function()
{
//if we have a controller, pause that
if(controller)
{
controller.pause();
}
//otherwise pause the video and audio separately
else
{
video.pause();
audio.pause();
}
}, false);
//when the video time is updated
video.addEventListener('timeupdate', function()
{
//if we have audio but no controller,
//and the audio has sufficiently loaded
if(!controller && audio.readyState >= 4)
{
//if the audio and video times are different,
//update the audio time to keep it in sync
if(Math.ceil(audio.currentTime) != Math.ceil(video.currentTime))
{
audio.currentTime = video.currentTime;
}
}
}, false);
})();
</script>
So your problem is to do with how you are grabbing the elements in the first place.
var video = document.getElementById('video');
var audio = document.getElementById('audio');
What you are doing is grabbing a single item on the page with the ID of "video" (same for "audio").
IDs have to be unique, so what you want to do is use classes instead.
<video class="video" preload="auto" controls="controls"
width="640" height="360" poster="./media/HorribleHistories.jpg">
See I changed the ID to a class.
Now any element with the class "video" can be used in our code.
However we do need to modify our code a bit as now we have multiple items to bind to.
please note the below is to give you an idea of how you loop items etc. You would need to rewrite your code to move each of the steps into functions etc. as your original code is not designed to work with multiple items
(function()
{
//get references to every single video and audio element
var videos = document.querySelectorAll('.video');
var audios = document.querySelectorAll('.audio');
// loop through all videos adding logic etc.
for(x = 0; x < videos.length; x++){
// grab a single video from our list to make our code neater
var video = videos[x];
if(typeof(window.MediaController) === 'function')
{
var controller = new MediaController();
video.controller = controller;
} else {
controller = null;
}
video.volume = 0.8;
//...etc.
}
})();
Quick Tip:
I would wrap your <video> and <audio> elements that are related in a <div> with a class (e.g. class="video-audio-wrapper").
This way you can change your CSS selector to something like:
var videoContainers = document.querySelectorAll('.video-audio-wrapper');
Then loop through them instead and check if they have a video and / or audio element
for(x = 0; x < videoContainers.length; x++){
var thisVideoContainer = videoContainers[x];
//query this container only - we can use `querySelector` as there should only be one video per container and that returns a single item / the first item it finds.
var video = thisVideoContainer.querySelector('video');
var audio = thisVideoContainer.querySelector('audio');
//now we can check if an element exists
if(video.length == 1){
//apply video logic
}
if(audio.length == 1){
//apply audio logic
}
// alternatively we can check both exist if we have to have both
if(video.length != 1 || audio.length != 1){
// we either have one or both missing.
// apply any logic for when a video / audio element is missing
//using "return" we can exit the function early, meaning all code after this point is not run.
return false;
}
///The beauty of this approach is you could then just use your original code!
}
Doing it this way you could recycle most of your code.
Thank you for your suggestions in changing the ID's into classes and adding the video wrapper <div> to the video container. That all makes sense in grouping each video on 1 page. I updated the the following code, but the audio captions won't play at all. The video plays and pauses fine, and the volume works. I am also not getting any syntax errors in the browser console. Here's what I got for my HTML and JS. I appreciate your help/feedback.
<div class="video-container-wrapper">
<div class="video-container">
<video class="video" preload="auto" controls="controls" width="640" height="360" poster="img/red-zone-thumb.png">
<source src="https://player.vimeo.com/external/395077086.hd.mp4?s=1514637c1ac308a950fafc00ad46c0a113c6e8be&profile_id=175" type="video/mp4">
<track kind="captions" label="English captions" src="captions/redzone-script.vtt" srclang="en" default="">
</video>
<audio class="audio" preload="auto">
<source src="captions/redzone-message.mp3" type="audio/mp3">
</audio>
</div>
</div>
Javascript:
var videoContainers = document.querySelectorAll('.video-container-wrapper');
for (x = 0; x < videoContainers.length; x++) {
var thisVideoContainer = videoContainers[x];
//query this container only - we can use `querySelector` as there should only be one video per container and that returns a single item / the first item it finds.
var video = thisVideoContainer.querySelector('video');
var audio = thisVideoContainer.querySelector('audio');
//now we can check if an element exists
if (video.length == 1) {
//apply video logic
//reduce the video volume slightly to emphasise the audio
video.volume = 0.8;
//when the video ends
video.addEventListener('ended', function () {
video.pause();
}, false);
}
if (audio.length == 1) {
//apply audio logic
audio.volume = 1;
//when the video plays
video.addEventListener('play', function () {
if (audio.paused) {
audio.play();
}
}, false);
// when the video ends
video.addEventListener('ended', function () {
audio.pause();
}, false);
//when the video time is updated
video.addEventListener('timeupdate', function () {
if (audio.readyState >= 4) {
//if the audio and video times are different,
//update the audio time to keep it in sync
if (Math.ceil(audio.currentTime) != Math.ceil(video.currentTime)) {
audio.currentTime = video.currentTime;
}
}
}, false);
}
}
I use video tag of html5 by separate audio from video like this code.
<video id="myvideo" controls >
<source src="output.webm" type="video/webm">
<audio id="myaudio" controls="">
<source src="audio1.ogg" type="audio/ogg"/>
</audio>
</video>
<script>
var myvideo = document.getElementById("myvideo");
var myaudio = document.getElementById("myaudio");
var change_time_state = true;
myvideo.onplay = function(){
myaudio.play();
if(change_time_state){
myaudio.currentTime = myvideo.currentTime;
change_time_state = false;
}
}
myvideo.onpause = function(){
myaudio.pause();
change_time_state = true;
}
</script>
It can play video and audio but it cannot change audio volume. Can I fix it to change volume ?
Use the MP4 video and check your source URL.
You might be searching the DOM volume Property, check it in w3school
In your case the solution is:
myaudio.volume = anynumber;
Must be a number between 0.0 and 1.0.
Example values:
1.0 is highest volume (100%. This is default)
0.5 is half volume (50%)
0.0 is silent (same as mute)
I have a HTML5 video element in my page and what I'd like to happen is when it reaches the 3 second mark, it needs to pause for 2 seconds and then continue playback.
The video length is about 8 seconds.
<video id="video" playsinline autoplay muted loop>
<source src="video.mp4" type="video/mp4"/>
<source src="video.webm" type="video/webm"/>
</video>
This does it
const video = document.getElementById('myVideo');
function playVid() {
video.play();
window.setTimeout(pauseVid, 3000);
}
function play() {
video.play();
}
function pauseVid() {
video.pause();
window.setTimeout(play, 5000);
}
setTimeout() .currentTime & timeupdate
Go to the link above to understand why setTimeout() ain't so great.
.currentTime Property
This property is used by <audio> and <video> tags to get/set playback time in seconds. In the following demo it is used to get the time:
var t = this.currentTime;
timeupdate Event
This event fires 4 times a second while an <audio> or <video> tag is playing. In the demo both a <video> and <audio> tag are registered to to the timeupdate event:
video.addEventListener("timeupdate", tick);
timer.addEventListener("timeupdate", tock);
Setup
[controls] Attribute
Added so the time can be reviewed as the demo runs, it's optional and recommended that it not be used in production.
<audio> Tag
An <audio> tag has been added as a timer, The attributes [muted] and [autoplay] are required:
<audio id='timer' src='https://od.lk/s/NzlfOTEwMzM5OV8/righteous.mp3' muted controls autoplay></audio>
Both tags will start playing and are listening to the timeupdate event and will call a function at a predetermined time:
function tick(e) {
var t = this.currentTime;
if (t >= 3) {
this.pause();
video.removeEventListener("timeupdate", tick);
}
}
function tock(e) {
var t = this.currentTime;
if (t >= 5) {
video.play();
timer.removeEventListener("timeupdate", tock);
}
}
Basically when the <video> and <audio> tags are triggered every 250ms, they are calling those functions:
<video> calls function tick()
if the playback time is 3 or more seconds it pauses.
to avoid constant triggering every 250ms, the eventListener is removed.
<audio> calls function tock()
if the playback time is 5 or more seconds it will play the <video>.
for the same reason as the <video>, the eventListener is removed.
Demo
var video = document.getElementById('video');
var timer = document.getElementById('timer');
video.addEventListener("timeupdate", tick);
timer.addEventListener("timeupdate", tock);
function tick(e) {
var t = this.currentTime;
if (t >= 3) {
this.pause();
video.removeEventListener("timeupdate", tick);
}
}
function tock(e) {
var t = this.currentTime;
if (t >= 5) {
video.play();
timer.removeEventListener("timeupdate", tock);
}
}
<video id="video" playsinline muted loop controls autoplay width='300'>
<source src="https://html5demos.com/assets/dizzy.mp4" type="video/mp4"/>
</video>
<audio id='timer' src='https://od.lk/s/NzlfOTEwMzM5OV8/righteous.mp3' muted controls autoplay></audio>
I have a video in my html. I would like the video to pause at 5 seconds after playing so I used addEventListener. I also have 2 buttons that call either restart() or jump().
When I play my video, an EventListener is called on my video. It pauses at 5 seconds, but I can't get it to play after 5 seconds (I've tried removing the listener but then the video no longer pauses). When I call jump(), it'll take me to 10 seconds but continue to pause when I try to play it. When I call reset(), the video will play up to 5 seconds again, which makes sense since I have a Listener on it. How do I get it to play after 10 seconds for when I call jump()? At first I thought I would have to remove my Listener but I believe I'll need that still because I would like the video to pause at 15 seconds. Or maybe I need to call removeEventListener somewhere else?
js
var video = document.getElementById("myvid");
video.addEventListener("timeupdate", function(){
if(this.currentTime >= 5) {
this.pause();
}
});
function restart(){
video.currentTime = 0;
}
function jump(){
video.currentTime = 10;
if (video.currentTime >=15){
video.pause
}
}
html
<video id="myvid" width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
<button onclick="restart()">restart</button>
<button onclick="jump()">jump</button>
You must keep the pause time in a variable. Then you can use it in the jump function:
var video = document.getElementById( 'myvid' ),
pausedtime = 0;
video.addEventListener( 'timeupdate', function() {
if ( this.currentTime >= pausedtime + 5 ) {
this.pause();
pausedtime = this.currentTime
}
});
function restart(){
video.currentTime = 0;
pausedtime = 0;
video.play()
}
function jump(){
pausedtime += 5;
video.currentTime = pausedtime;
video.play()
}
<video id="myvid" width="320" height="240" controls>
<source src="http://iandevlin.com/html5/media-player/parrots.mp4.mp4" type="video/mp4">
<source src="http://iandevlin.com/html5/media-player/parrots.webm" type="video/webm">
</video>
<br>
<button type="button" onclick="restart()">Restart</button>
<button type="button" onclick="jump()">Jump</button>
Currently I'm designing a Web application (game) on Tizen where I want to:
Display an image
Play an audio clip(around 15-17 seconds long)
Do nothing for 5 seconds
Play another audio clip(about 2-3 seconds)
Hide the image
These steps are to be performed in a loop (N times) in order. However, when I run my App on the emulator, it plays all the sounds to be played on step 2 together at the same time while the image is never visible.
Following is my Javascript function:
function performTask(image, audioName) { //sending id for image and audio, e.g.: performTask("img1", "aud1")
// Show the image
img = document.getElementById(image);
if (img && img.style) {
img.style.height = screen.height;
img.style.width = screen.width;
img.style.visibility = "visible";
} else {
console.log("exercise(): error in setting image");
}
// play the audio
try {
myAudio = document.getElementById(audioName);
myAudio.play();
myAudio.onended = function() {
timeOut();
};
} catch (error) {
console.error("exercise(): " + error.message);
}
// after 30 seconds, ring the bell!!
try {
console.log("playing bell");
document.getElementById("bell").play();
} catch (error) {
console.error("bell: " + error.message);
}
//hide image
img.style.visibility = "hidden";
}
The timeOut() function:
var timer = 5000;
function timeOut() {
if (timer > 0) {
setTimeout(timeOut(), timer--);
}
}
The structure of the HTML page where this is called:
...
<body onload="someFunc()"> <!-- this calls performTask() in a for-loop-->
<p>
<img src='images/image1.png' alt="pose1n12" id="img1" />
.... 10 more such images
</p>
<p>
<audio id="bell">
<source src='audio/bell.mp3' type="audio/mpeg" />
</audio>
<audio id="aud1">
<source src='audio/aud1.mp3' type="audio/mpeg" />
</audio>
.... 10 more such clips
</p>
EDIT: Adding the definition for someFunc()
function someFunc() {
var a;
image = ''; // select image at particular count
audioName = ''; // select respective audio
for (a = 1; a <= 12; a++) { // the asana tracker loop
switch (a) { // assigns image & audio
case 1:
image = "img1n12";
audioName = "1N12";
break;
...... continues till case 12
}
}
performTask(image, audioName);
}
Please help.
By my understanding there is an "ended" event fired when a sound has finished playing.
http://forestmist.org/blog/html5-audio-loops/
You could use this to make stage 2 trigger stage 3 and have stage 4 trigger stage 5.
when playing the first audio, you should do every other step on the call back onended, and if you need to wait again some other time, you need to pass the call back to the setTimeout, the following code is a bit simplified :
// on Global scope
var audioName = "something";
var img = document.getElementById("image_id");
showImage ();
playAudio(audioName, function () {
playBell ();
hideImage ();
});
Now the functions definition would be like this :
function showImage () {
if (img && img.style) {
img.style.height = screen.height;
img.style.width = screen.width;
img.style.visibility = "visible";
} else {
console.log("exercise(): error in setting image");
}
}
function playAudio (audioName, callback) {
try {
myAudio = document.getElementById(audioName);
myAudio.play();
myAudio.onended = function() {
setTimeout(callback, 5000); // after 5 seconds
};
} catch (error) {
console.error("exercise(): " + error.message);
}
}
function playBell () {
try {
console.log("playing bell");
document.getElementById("bell").play();
} catch (error) {
console.error("bell: " + error.message);
}
}
function hideImage() {
img.style.visibility = "hidden";
}
Here I have two examples of addEventListener('ended'). This event listener should work fine for what you are asking.
First Method: Calls another function ChangeSrc() and uses the same player.
Method one will get the player by id, tell the player to play and add the event listener. This will listen of the ended event then call ChangeSrc(). When ChangeSrc is called the eventlistener is removed and the player src is changed to the next track and then told to play.
HTML:
<b>Method One</b><button onclick="MethodOne()">Start</button><br>
<img id="DemoImg" src="sample1.png"/><br/>
<audio id="DemoAud" controls>
<source src='sample1.mp3' type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Javascript
function MethodOne(){
var a=document.getElementById("DemoImg");
var b=document.getElementById("DemoAud");
b.play();
b.addEventListener('ended',ChangeSrc,false);
}
function ChangeSrc(){
var a=document.getElementById("DemoImg");
var b=document.getElementById("DemoAud");
b.removeEventListener("ended",ChangeSrc);
a.src="sample2.png";
b.src="sample2.mp3";
b.play();
}
Second Method: Uses one function and two players (Like your source code does)
This method is very much like the first method but had the function in the eventlistener, this will tell the other player to play as this function will only run when the first audio clip has ended. This will also display the container for the image/player.
HTML
<b>Method Two</b><button onclick="MethodTwo()">Start</button><br>
<div id="Demo2" class="DemoBlock">
<img id="DemoImg2" src="sample1.png"/><br/>
<audio id="DemoAud2" controls>
<source src='sample1.mp3' type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div><div id="Demo3" class="DemoBlock">
<img id="DemoImg3" src="sample2.png"/><br/>
<audio id="DemoAud3" controls>
<source src='sample2.mp3' type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>
Javascript:
function MethodTwo(){
var a=document.getElementById("DemoAud2");
var b=document.getElementById("DemoAud3");
a.play();
a.addEventListener('ended',function(){
document.getElementById("Demo3").style.display="inline-block";
b.play();
},false);
}
This Exmaple is just to show you two different methods of the using the eventlistener, the rest is down to you to integrate this into your existing source code.
Demo Source Code
function MethodOne(){
var a=document.getElementById("DemoImg");
var b=document.getElementById("DemoAud");
b.play();
b.addEventListener('ended',ChangeSrc,false);
}
function ChangeSrc(){
var a=document.getElementById("DemoImg");
var b=document.getElementById("DemoAud");
b.removeEventListener("ended",ChangeSrc);
a.src="http://coded4u.com/28831485/sample2.png";
b.src="http://coded4u.com/28831485/sample2.mp3";
b.play();
}
function MethodTwo(){
var a=document.getElementById("DemoAud2");
var b=document.getElementById("DemoAud3");
a.play();
a.addEventListener('ended',function(){
document.getElementById("Demo3").style.display="inline-block";
b.play();
},false);
}
.DemoBlock{display:inline-block;}
#Demo3{display:none;}
<b>Method One</b><button onclick="MethodOne()">Start</button><br>
<img id="DemoImg" src="http://coded4u.com/28831485/sample1.png"/><br/>
<audio id="DemoAud" controls>
<source src='http://coded4u.com/28831485/sample1.mp3' type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<hr/>
<b>Method Two</b><button onclick="MethodTwo()">Start</button><br>
<div id="Demo2" class="DemoBlock">
<img id="DemoImg2" src="http://coded4u.com/28831485/sample1.png"/><br/>
<audio id="DemoAud2" controls>
<source src='http://coded4u.com/28831485/sample1.mp3' type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div><div id="Demo3" class="DemoBlock">
<img id="DemoImg3" src="http://coded4u.com/28831485/sample2.png"/><br/>
<audio id="DemoAud3" controls>
<source src='http://coded4u.com/28831485/sample2.mp3' type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>
I hope this helps. Happy coding!