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.