I have to play a music file on HTML page which is running on android, also need to control the volume by javascript function. Can someone give me any idea?
If you are using the HTML5 <audio> element, you can control the volume using the .volume. attribute. Set it to 1.0 for max volume, and 0.0 to mute it.
For example, this script will begin playing a file, then reduce its volume to 25% after a few seconds.
<audio src="http://goo.gl/89jWZ" id="example"></audio>
<script>
var audioElement = document.getElementById("example");
audioElement.play();
setTimeout(function() {
audioElement.volume = 0.25;
}, 3000);
</script>
Related
I am trying to get video duration in HTML5 with out playing video or before playing video to show on video thumb as you seen on you tube or any other video sites.
Any help will be really appreciate.
Thanks in Advance.
For HTML5 you should be able to use the video tag's duration property, once the file's metadata is loaded. See this answer for a good way to do it:
Retrieving HTML5 video duration separately from the file
To quote the anwser by Mikushi:
myVideoPlayer.addEventListener('loadedmetadata', function() {
console.log(videoPlayer.duration);
});
By listening for the 'loadedmetadata' event you will ensure the duration value has been loaded.
More details on the loadedmetadata can be found here: http://www.w3schools.com/tags/av_event_loadedmetadata.asp
EDIT
As per #lucas-vasques 's comment, instead of the loadmetadata event, you could use durationchange which the MDN Media Events list describes as ...
The metadata has loaded or changed, indicating a change in duration of
the media. This is sent, for example, when the media has loaded
enough that the duration is known.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function getDuration() {
var s = document.getElementById('a');
alert(s.duration)
}
</script>
</head>
<body>
<div>
<video src="2.mp4" id="a" controls="controls"></video>
<button onclick="getDuration()">get duration</button>
</div>
</body>
</html>
There is a special event triggered on video elements called "loadedmetadata". Once this one is triggered, properties such as duration are available on the video element.
Here's an exhaustive list of all HTML5 video events : http://www.w3.org/2010/05/video/mediaevents.html
// Assume "video" is the video node
var i = setInterval(function() {
if(video.readyState > 0) {
var minutes = parseInt(video.duration / 60, 10);
var seconds = video.duration % 60;
// (Put the minutes and seconds in the display)
clearInterval(i);
}
}, 200);
After the video ends i want it to be played again, but this time from a different start time. I have added a video ended event handler :
video.addEventListener('ended', handleVideoEnd);
And my handleVideoEnd looks like this:
function handleVideoEnd(e) {
if (currentVideo.loop) {
var video = document.getElementById('video');
video.currentTime = 1;
video.play();
}
}
Unfortunately when i use that code my video becomes corrupted for a couple of seconds resulting in that effect: http://screenshot.sh/m1UaF580NNx8B
This problem, however does not appear if i set the currentTime to 0.
I'm using webm video and testing it in chrome currently. Did anyone have a similar issue when seeking a video part?
The following javascript function serves and autoplays a audio file (via a HTML 5 audio tag), cuts the mp3 playback at 6 seconds and loops + autoplays the audio from the beginning.
javascript:
function updateaudio() {
var a_str = '<audio autoplay source src="audio/coolsound.mp3" type="audio/mpeg"></audio>';
document.getElementById('audio_span').innerHTML = a_str;
}
setInterval(updateaudio, 6000)
html:
<div><span id="audio_span"></span><script src="js/audio.js"></script></div>
Is there any using the html5 audio attribute to set autoplay playback to once off i.e. non-looping? Alternatively, is there another way to achieve this (via either javascript or html5)? Upon the audio event ending, I would like to set a flag and stop any playback.
Don't use setInterval() if you don't want a loop.
If you simply want to pause the playback after six seconds do:
setTimeout( function () {
document.getElementById('audio_span').pause();
}, 6000)):
I have a page that has some animal images and when you click on them it plays the sound of the animal, but since its a kid's game I have a background music, but the sound is too loud. I want when the background music plays automatically, the volume changes to 0.5. How can I set a function that does that? I don't want a function based on click, I want it hidden and change the volume automatically.
The function (it's not working)
myAudio = document.getElementById("audio1");
function setHalfVolume() {
myAudio.volume = 0.4;
}
HTML
<audio id= "audio1" controls="controls" onload="setHalfVolume()">
<source src="Audio\Jaunty Gumption.mp3" type="audio/mp3">
</audio>
The event you need is called onloadeddata.
Also unless you need access to the myAudio variable from other functions or globally I would suggest moving it into the setHalfVolume function. Give this a try.
Change your HTML to:
<audio id= "audio1" controls="controls" onloadeddata="setHalfVolume()">
<source src="Audio\Jaunty Gumption.mp3" type="audio/mp3">
</audio>
Change your JavaScript to:
function setHalfVolume() {
var myAudio = document.getElementById("audio1");
myAudio.volume = 0.5; //Changed this to 0.5 or 50% volume since the function is called Set Half Volume ;)
}
Try adding an event for play on all of the audio elements of interest and calling setHalfVolume in there:
document.querySelector('#audio1').addEventListener('play', setHalfVolume);
You'll also probably want to reset the volume back to normal after
document.querySelector('#audio1').addEventListener('pause', resetVolume);
Where resetVolume and setHalfVolume are declared sort of like:
function setHalfVolume() {
document.getElementById("audio1").volume /= 2;
}
function resetVolume() {
document.getElementById("audio1").volume *= 2;
}
We have a video (13 minutes long) which we would like to control using HTML5. We want to be able to let our users control and select the parts of the video they want to play. Preferably this control would be through 2 input fields. They would input start time (in seconds) in first box and input duration to play (in seconds) in second box. For example, they might want to start the video 10 seconds in and play for 15 seconds. Any suggestions or guidance on the Javascript needed to do this?
Note: I have found the following:
Start HTML5 video at a particular position when loading?
But it addresses only starting at a particular time, and nothing with playing the video for a specified length of time.
You could use the timeupdate event listener.
Save the start time and duration time to variable after loadedmetadata event.
// Set video element to variable
var video = document.getElementById('player1');
var videoStartTime = 0;
var durationTime = 0;
video.addEventListener('loadedmetadata', function() {
videoStartTime = 2;
durationTime = 4;
this.currentTime = videoStartTime;
}, false);
If current time is greater than start time plus duration, pauses the video.
video.addEventListener('timeupdate', function() {
if(this.currentTime > videoStartTime + durationTime){
this.pause();
}
});
If you are able to set start time and end time of video while setting the video url.
you can specify the start and end time in the url itself like
src="future technology_n.mp4#t=20,50"
it will play from 20th second to 50th second.
There are a lot of nuances to using the javascript solution proposed by Paul Sham. A much easier course of action is to use the Media Fragment URI Spec. It will allow you to specify a small segment of a larger audio or video file to play. To use it simply alter the source for the file you are streaming and add #t=start,end where start is the start time in seconds and end is the end time in seconds.
For example:
var start = document.getElementById('startInput').value;
var end = document.getElementById('endInput').value;
document.getElementById('videoPlayer').src = 'http://www.example.com/example.ogv#t='+start+','+end;
This will update the player to start the source video at the specified time and end at the specified time. Browser support for media fragments is also pretty good so it should work in any browser that supports HTML5.
Extend to michael hanon comments:
IE returns buffered.length = 0 and seekable.length = 0. Video doesn't play. So solution:
src="video.mp4#t=10,30"
will not works in IE. If you would like to support IE only way is to use javascript to seek video just after start from 0 second.