There is always a gap on my Audio Loop in Safari - javascript

SITUATION:
It works fine on Chrome. But there is a small gap every time the "Waterfall 1" sound loops, only on Safari.
WHAT I TRIED SO FAR:
With the HTML 5 audio element:
audio.addEventListener('timeupdate', function(){
var buffer = 0.44;
if(this.currentTime > this.duration - buffer){
this.currentTime = 0
this.play()
}}, false);
Gapless.js https://github.com/regosen/Gapless-5
Howler.js https://github.com/goldfire/howler.js
Web Audio API alone: How to seamlessly loop sound with web audio api
QUESTION:
How can I get rid of the gap in the audio loop in Safari ?

I had the same issue and I resolved it by using a file format other than mp3.
I would also highly recommend using howler.js!
Here is a detailed article that might help: https://www.kevssite.com/seamless-audio-looping/
While looking for a fix to this I learnt that part of the ‘pause’ problem is caused by using mp3 as the audio file format. Apparently there is a bug (or maybe its a feature!) in the mp3 spec that adds a few ms of silence at the start of the track. If you load a track into an editor like audacity you can see the gap. You can edit the track to remove the silence, but it’ll be back when you re-load it. I recommend using the ogg format instead of mp3 as ogg does not add any silence to the start of the track. Switching to the ogg format certainly made an improvement but there was still a small pause between loops.
Incidentally just converting from mp3 to ogg won’t remove the silence automatically. You’ll need to load the mp3 into an editor, remove the gap from the start of the file, then export the track in the ogg format.

Related

Inconsistent audio playback from audio tag in Safari on laptop

Using React, I'm using JavaScript (play()) to make two audio tags play 2 different .mp3 files (at completely separate times). The .mp3 files are short (less than a second).
import sound1 from 'sound1.mp3';
import sound2 from 'sound2.mp3';
<audio controls muted>
<source src={sound1}></source>
</audio>
<audio controls muted>
<source src={sound2}></source>
</audio>
audio {
display: none;
}
In Safari 13.1.2, on my 13-inch MacBook Catalina, often, one of the sounds plays imperfectly - it's as if the start of the sound isn't heard. Here's a video of me demonstrating what the sound's really like against what it should be like. When the black piece moves, you'll need to turn your volume all the way up to hear a quiet, echoey noise. Then I play you how that file's supposed to sound.
When on my iPhoneX, in Chrome & Safari, the same sound (seemingly) fails to play at all. This may be explained by this SO answer which says that sound won't play unless from a callback from an event handler that involves the user's physical participation e.g. click. This theory fits my case.
My question is similar to this post and this post which got no response. If you think it'd be useful for me to recreate this problem with a Sandbox I could try.
Personal note:
On my 13-inch MacBook Catalina:
on Chrome both sounds work fine.
in Safari, sound2 works imperfectly.
on my IPhoneX:
on Chrome & Safari sound2 is sometimes audible later on.
EDIT:
In this video you can hear me playing back the problematic audio file in Finder. I play it the first time - fine; but the second+ time it makes the same incorrect sound heard in the browser!
Replacing the problematic audio file with a different audio-file brings success - and suggests the problem lies with the audio-file and not my implementation of it in the website. I'm willing to reframe this problem as a poorly performing audio-file but I really don't know. If this were the problem, my only recourse to avoid it would be replaying the audio-file in Finder and making sure it plays a consistent sound.

Forcing playback with short HTML5 videos in Safari

I've been running into issues with Safari and the <video> element in combination with shorter high-quality videos. For a showcase website I'm loading 12-15 second .mp4 and .webm files into a <video> container using the <source> element. When trying to play the video in Chrome it works flawlessly and the video start playing almost instantaneously, but Safari appears to want to load the video completely before starting playback.
I have looked into loading the video directly through the src attribute of <video> and have also added the preload="auto" attribute in an attempt to force immediate playback.
I've set up an example using one of the videos we use on the websites, which is around 8 MB and 12 seconds long: https://jsfiddle.net/n1eac46v/
var video = document.getElementById('video');
var source = document.createElement('source');
source.src = "foo.mp4";
source.type = "video/mp4";
video.appendChild(source);
video.on("canplay canplaythrough", video.play);
As you can see I'm also listening for the canplay and the canplaythrough events, but even that doesn't appear to help. I've been looking all over the place for days on end but am running out of options now.
I am not an OS X user so I have no experience with Safari, however I've had the chance to debug mp4 playback in Chrome. Chrome has a buffering window that it tries to fill until it begins actual playback. Safari may have a bigger window. Also since in normal cases all the tables that contain sample positions, durations etc. are at the end of the file browser may want to read them to begin playback. A smart browser can dispatch a read with a byte range header to get only the end of the file and then seek the actual video data, but again I have no idea what safari does.
What you can try is to use MP4Box on your video files to move the meta data and all tables to the beginning, that could help.
As mentioned by OP in the comments using FFmpeg with -movflags faststart (see FFmpeg MP4 options) can also be used to achieve this.

Load audio in myltiple time in HTML 5 with javascript

I made a online audio player. its fine but its taking too many time to start playing the audio on slow internet. Is here can i do anything to fix this problem?
can I set any loading time? like at first the audio will load first 10 second. when the first 10 second loaded the player will start plying. while it play first 10 second in that time the player will load next 10 second.? can I do it?
var audio = new Audio();
audio.src ="dir/music.mp3";
audio.loop = true;
audio.autoplay = true;
it is my current code. Please help me. Thanks
I think your best way will be to have a lower quality .mp3 file (192kbps)?
You're never sure the next 10seconds will be loaded once you've played the first 10seconds.
The Browser decides how much he will preload. You could make this like: Force the Browser to Play audio as soon the HTML is fully loaded.
window.onload = function() {
document.getElementById("my_audio").play();
}
But slow connection is not you only enemy. If the Browser/PC is slow it may take longer because it has to load and decoding the audio. Your best bet is to use audio with lower quality. So it can load and process it faster. If you using HTML5 audio tag, make sure to use preload="auto".
<audio preload="auto">
To make advanced audio stuff you had to use low level audio frameworks and so on to have more control over how the things work.
Also .wav is way faster in decoding than .mp3.

How to increase audio loading speed using JavaScript?

I have created code for playing an .mp3 file using JavaScript. But the file is taking to much time to play on Android. I want to play the sound quickly after click on a text image. How do I increase loading speed on Android?
My JavaScript code:
if(window.audio)
{
audio.pause();
}
window.audio = new Audio (audio_path);
window.audio.play();
Check demo here -
http://97.74.195.122/gizmo-demo/canvasslidertwo.php
In the above link, click on the Japanese word for playing sound.
You are actually facing the bug depicted in this question. Which makes chrome browsers redownload the files from an Audio Element each time you change its src property (no-caching).
One solution would be to use the WebAudioAPIand store your audio files in the buffer. Doing so, you should be able to call them with no latency.
You can check the accepted answer for an example on how to deal with it.
Or you could also try not to call a new Audio() on each click, and rather load every audios from your page and only call their play() method on click.
But I'm not sure it would fix your issue.

Facing an issue of double sound on Google chrome while running Edge animation

I have created an animation in Adobe Edge animate itself and its working fine on the browser. Next thing I have added a voice over to the animation which is completely synced and running perfectly using j-query.
Here's the problem which i am facing - while running the animation on the Google Chrome and Safari, I am getting double sound which is annoying. I have discovered on internet that Google chrome supports MP3, OGG, WAV formats for the audio. And Mozilla supports the OGG format. I have connected the two formats with animation using j-query which are MP3 and OGG format. And Google Chrome is reading the both formats which is creating an issue.
Please help me out to remove the double sound issue in Chrome.
Regards
Vikas Sharma
instead of using an <audio> tag, you might try using the html5 audio object and manipulating it with javascript.
here's an example:
var audiophile = new Audio();
audiophile.src = 'audiofile.mp3';
audiophile.play();
that way you're only referencing one source file, and there's no chance of two playing simultaneously.
hope this helps.

Categories