I'm trying to get a sound looped on html 5. The sound.loop = true; works, but when the sound get finished, there's a silence between looping. How can I avoid that? Thanks a lot, here's the code:
<audio id="ruido">
<source src="ruido.ogg" type="audio/ogg">
<source src="ruido.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
var sound = document.getElementById("ruido");
sound.loop = true;
sound.play();
</script>
You could use a JavaScript function to loop when an 'ended' event is called.
<audio id="loopMe" controls preload>
<source src="ruido.ogg" type="audio/ogg">
<source src="ruido.mp3" type="audio/mpeg">
</audio>
document.getElementById('loopMe').addEventListener('ended', function(){
this.currentTime = 0;
this.play();
}, false);
Or better yet try the SeamlessLoop library, Reproduce seamless/gapless audio loops on HTML5/JavaScript without specific browser Audio APIs.
Related
I'm using the following code to display video and audio files in HTML5 player:
<video id="myvideo" controls muted>
<source src="path/to/video.mp4" type="video/mp4" />
<audio id="myaudio" controls>
<source src="path/to/audio.mp3" type="audio/mpeg"/>
</audio>
</video>
<script>
var myvideo = document.getElementById("myvideo");
var myaudio = document.getElementById("myaudio");
myvideo.onplay = function() {myaudio.play(); myaudio.currentTime = myvideo.currentTime;}
myvideo.onpause = function() {myaudio.pause();}
</script>
The problem is that I can't get control on the volume controls (mute/unmute, volume up/down). It just doesn't work. Unfortunately I don't know the correct event name for it.
Could someone help me with that?
Thanks!
Muted doesn't have a simple event tied to it, what you would need to do is track the volumechange event and check the muted attribute
myvideo.onvolumechange = function() {
if (myvideo.muted) {
myaudio.pause();
}
}
see https://www.w3.org/2010/05/video/mediaevents.html for a fairly extensive list of the events and attributes available for the standard <video> tag
I have three HTML5 media tags. One video and two audios. I stream them by HLS. I have the following code for the HLS setup.
The audios are good on major browsers except Safari. Audios are choppy for Safari on both macOS and iOS. I wonder if I'm missing something setting up HLS?
<video id="vid" preload="metadata" muted playsinline></video>
<audio id="human" preload="metadata" playsinline></audio>
<audio id="racoon" preload="metadata" playsinline></audio>
<script>
// HLS setup for media.
var media = document.getElementById('vid');
var mediaSrc = 'media/vid/playlist.m3u8';
// First check for native browser HLS support
if (media.canPlayType('application/vnd.apple.mpegurl')) {
media.src = mediaSrc;
// If no native HLS support, check if HLS.js is supported
} else if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(mediaSrc);
hls.attachMedia(media);
} else {
// Alert only once. Don't alert for other video/audio tags.
alert("Your browser doesn't support HTTP Live Streaming.")
}
</script>
<script>
// HLS setup for media.
var media = document.getElementById('human');
var mediaSrc = 'media/human/playlist.m3u8';
// First check for native browser HLS support
if (media.canPlayType('application/vnd.apple.mpegurl')) {
media.src = mediaSrc;
// If no native HLS support, check if HLS.js is supported
} else if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(mediaSrc);
hls.attachMedia(media);
}
</script>
<script>
// HLS setup for media.
var media = document.getElementById('racoon');
var mediaSrc = 'media/racoon/playlist.m3u8';
// First check for native browser HLS support
if (media.canPlayType('application/vnd.apple.mpegurl')) {
media.src = mediaSrc;
// If no native HLS support, check if HLS.js is supported
} else if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(mediaSrc);
hls.attachMedia(media);
}
</script>
I had three HTML media tags, one video and two audios:
<video id="vid" preload="metadata" muted playsinline>
<source src="media/vid/playlist.m3u8">
<source src="media/vid.mp4" type="video/mp4">
<source src="media/vid.mov" type="video/mp4">
<source src="media/vid.webm" type="video/webm">
<source src="media/vid.ogv" type="video/ogg">
Your browser does not support the vedio tag.
</video>
<audio id="human" preload="metadata" playsinline>
<source src="media/human/playlist.m3u8">
<source src="media/human.m4a" type="audio/mpeg">
<source src="media/human.ogg" type="audio/ogg">
<source src="media/human.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<audio id="racoon" preload="metadata" playsinline>
<source src="media/racoon/playlist.m3u8">
<source src="media/racoon.m4a" type="audio/mpeg">
<source src="media/racoon.ogg" type="audio/ogg">
<source src="media/racoon.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
I was getting the media elements:
var vid = document.getElementById("vid")
var audioHuman = document.getElementById("human")
var audioRaccoon = document.getElementById("racoon")
Then, I was using a callback for video play:
// When video is playing, move slider and play audio.
vid.addEventListener("timeupdate", timeUpdate)
The callback updates the audio current time according to the video:
function timeUpdate() {
t = vid.currentTime
// Human voice isn't synced with video. It was a recording mistake.
// Compensate for the mistake.
var audioHumanOffset = 1.4
audioHuman.currentTime = t - audioHumanOffset
audioRaccoon.currentTime = t
}
The above callback was the cause of bad audio on Safari. After removing the above callback, the Safar audio is good now =)
The above callback is replaced by a totally different logic to keep video and audios in sync.
I need to play a video (webm) and an audio (m4a) file at the same time on a browser that only accepts one media playing at a time (if I try to play them simultaneously on separate <video> and <audio> elements, the previous gets paused automatically).
Does anyone know what can I do?
Control the play of two media using JavaScript.
Try this:
function Players() {
var audio_player = document.getElementById('audio');
var video_player = document.getElementById('video');
audio_player.play();
video_player.play();
}
<button onClick="Players()">PLAY</button>
<br>
<br>
<audio id="audio" controls="controls">
<source src="audio.wav" type="audio/wav">
</audio>
<br>
<video id="video" width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
</video>
while I am trying to autoplay a song in chrome but it is not working. I tried using JavaScript still getting the same error.
function myFunction() {
var x = document.getElementById("myAudio").autoplay;
document.getElementById("demo").innerHTML = x;
}
myFunction();
<audio id="myAudio" controls autoplay>
<source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<div id="demo"></div>
In most browsers you can only use autoplay with the muted attribute
See: https://www.w3schools.com/tags/att_audio_autoplay.asp
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
So something like this should work:
<audio id="myAudio" controls autoplay muted>
<source src="horse.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
It is not allowed to autoplay sounds. So it has to be muted. Also with video you have to mute it, otherwise the video is not played. So it will be with audio also. Maybe you have to add a button that says that they have to click it to hear the sound?
I am new on HTML5, What I want to do is get the audio duration time when I click the pause button
here is my code
<audio controls="" id="audio">
<source src="assets/record_file/abc.mp3" type="audio/ogg">
<source src="assets/record_file/abc.mp3" type="audio/mpeg">
Your browser does not support the audio element. Please try other latest browser
</audio>
any idea how to do it ?
thanks
document.getElementById('audio').pause = function() {
var currentTime = document.getElementById('audio').currentTime;
var duration = document.getElementById('audio').duration;
alert(currentTime);
};
Please check HTML Audio and Video DOM Reference, describe all methods, properties and events.