We Keep Coding

Audio (mute/unmute) control in HTML5 video player

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

HLS audio is choppy on Safary, but good on other major browsers

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.

song.currentTime returning undefined

Before I ask my question I just wanted to say that I'm a noob to Javascript and to StackOverflow in general so I wanted to apologize in advance if this question is too dumb.
Anyways, I'm learning Javascript and right now I'm experimenting with currentTime, but for some reason song.currentTime is returning undefined, and I also can't set the currentTime. Here is my code:
<audio autoplay>
<source src="A.mp3" type="audio/mpeg" id="awesomeness">
Your browser does not support the audio element.
</audio>
<script type="text/javascript">
function myFunction(){
console.log("letting everything preload by waiting 2 seconds");
var song= document.getElementById("awesomeness");
console.log(song.currentTime);
song.currentTime=30;
}
</script>
Here it is in action (look at the console output): http://dancingcats.azurewebsites.net/

The currentTime property belongs to the audio element(Media)
You need is to set it to the audio element not to the source element
<audio autoplay id="awesomeness">
<source src="A.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

How to avoid audio loop lag in javascript?

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.

HTML5 Audio - How to detect if a file is supported

Using HTML, I can write this:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
This will first try to play horse.ogg, and if it isn't supported, then it will play horse.mp3. My question is, is it possible to do something like this using new Audio() (i.e. without touching the DOM)? For example, this is what I was thinking:
var audio = new Audio();
audio.src = "horse.ogg";
audio.load();
if (!audio.canPlay) {
audio.src = "horse.mp3";
audio.load();
}
I know of these techniques, but they assume that I know the type of file that is being sent in. Though I could do an extension check, it seems very hacky.