I'm playing audio using the HTML audio player, and I've noticed that Safari is very slow to load and play the audio (about 5.5 seconds vs. .5 seconds for Chrome). Is there a way I can speed this up?
I've seen discussion (like here and here) about AudioContext as a possible solution, but I'm not clear on how AudioContext works--what would be the code to implement it? I want to keep the html audio tag, bc of its features.
[EDIT: Actually, having seen the way that safari changes the look of the audio player on different devices, I'm ok just playing the audio through javascript (audio.play()...). But it's still slow on safari either way.]
(I'm using angular, but I don't think that makes a difference for this purpose)
relevant code:
html:
<audio controls id="audioId" (loadeddata)="onCanPlayFunction()" >
<source src="{{coolAudio}}" type="audio/mpeg">
Your browser does not support the audio player.
</audio>
typescript:
playAudio() {
this.coolAudio = 'audioFile.m4a'
}
onCanPlayFunction() {
let audioElement = <HTMLVideoElement>document.getElementById('audioId');
audioElement.play()
}
Related
I have a video element which I'm controlling the full screen and play via a dedicated button. Otherwise the video element is hidden.
<video controls>
<source src="/video.mp4" type="video/mp4">
</video>
<button>play</button>
Plays fine. However, the initial playback on Safari 13 Catalina takes an additional few seconds over other browsers. Checking the network tab doesn't reveal any pre-loading. It seems Safari has a higher buffer threshold before playing.
Is there a workaround for this behavior?
Setting preload="auto" on the video tag should make the video seem to start faster, if you are not concerned with extra bandwidth.
A further optimization would be to try serving an HLS stream in addition to the progressive download mp4. You don't need a special server to do this, a conventional web server can serve HLS live streams if they are correctly encoded/packaged.
I'm a web developer at a radio broadcaster. Since the release of IOS 11, we received several user complaints that our audio live streams can't be played on IOS 11 devices anymore. To embed the streams in our websites we use the HTML5 AudioElement. When debugging the javascript on an iPhone whit IOS 11 we recognized that calling the audio elements play() method resulted in a MediaError of ErrorCode 4 (MEDIA_ERR_SRC_NOT_SUPPORTED). All other devices (Android, Windows and IOS 10 and below) play the streams without any problem.
I created a little codepen example
<audio controls>
<source src="http://hr-hrinfo-
live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3"
type="audio/mpeg;codecs="mp3"">
Your browser does not support the audio element.
</audio>
https://codepen.io/ampersand83/pen/pWwgKm in which I just create an AudioElement via the AudioTag and hand the source Tag one of our stream URLs.
Devices running IOS 10 and below play the streams without any problem as well as current android or windows devices. However, a device running IOS 11.0.1 can't play the stream. I can't find any information on why this wouldn't be possible anymore. Does anybody have an idea why our streams won't work anymore and can give us advice on what we can do to make them work again?
This issue is down to Apple WebKit changing in the latest iOS release. For users running KH Icecast a fix can be expected soon (hopefully!) https://github.com/karlheyes/icecast-kh/issues/172
Adding a simple audio control like this
<audio controls>
<source src="https://swr-swr3-live.sslcast.addradio.de/swr/swr3/live/mp3/128/stream.mp3" type="audio/mpeg;codecs="mp3"">
</audio>
…does not play.
While this one does:
<audio controls>
<source src="http://mp3-live.swr3.de/swr3_m.m3u">
</audio>
The only difference I can spot is that on an MP3 it fails while a M3U playlist works.
On iOS 10 and below as well as on current macOS Safari, it works both.
Also Chrome on iOS 11 fails (same Webkit engine?!)
I saw this same issue when trying to load a local HTML file with audio controls into a UIWebView. However, my file was an .m4a audio file. I found that just removing type did the trick. So my HTML looked like this:
<div class="audio"><audio controls><source src="my_local_audio_file.m4a"></audio></div>
Using type=audio/mp4 also worked for me. So I'm guessing it's an incompatible mime type and just removing the type would be the best option.
Hope this helps.
In my app, there is an audio tag, playing a MP3 file. When I minimize the app, the audio stops. So, I want to know how to keep it playing.
PD: I use JavaScript.
See this post on the win8 developer blog. It discusses (among other things) the background audio support in Windows 8.
As described in this article:
http://msdn.microsoft.com/en-us/library/windows/apps/hh452730.aspx
You can add the msAudioCategory attribute to your <audio> tag for more functionality.
For example:
<audio msAudioCategory="BackgroundCapableMedia" controls="controls">
<source src="song.mp3"/>
</audio>
Good day,
I am trying to build a simple music player using the html audio tag and some javascript. When I was coding it worked ok while the files were stored locally with both safari (on an Imac) and Firefox. Then I uploaded it to my web page to test it live and had these issues:
(1) Safari on the Imac takes about a minute to load the file and start playing
(2) Safari on the iphone doesn't autoplay the files although I used the autoplay attribute in the code....see code below)
(3) Firefox just doesn't play it! (although it played just fine when the files were local)
Seems like the files are too large....my questions are: (1) is there a way to make the loading time shorter? and (2) any idea why the autoplay doesn't work on the iPhone Safari and how to get around it?
Here is the code I used for the songs:
<audio autoplay="autoplay" controls="controls">
<source src="../audio/3.ogv" />
<source src="../audio/3.mp3" />
Your browser does not support the audio element.
</audio>
thanks for your help
diego
I believe you cannot autoplay on the iPhone. I think this is a restriction imposed in order to prevent excess accidental data usage. There were some workarounds to create a fake click, but they seem to have been patched.
Firefox doesn't support MP3 via HTML5. ogv files are Ogg Video, not Audio (ogg), which could be why it's not playing in the audio tag.
As for loading time, the best way would be to compress the file as much as possible. This would reduce the download time.
Just a heads up ... since HTML 5 isn't XML based syntactically, you don't assign attributes like that.
use <audio autoplay controls> as the opening tag.
I have a javascript that plays audio in the browser, using the html5 <audio> tag. It works fine in the iPhone browser, but not in Android. (Testing using a htc desire with android 2.1.) Anyone know why?
My code:
function playHTML5(sound, soundcv){
// sound = url to m4a audio file
// soundcv = div in which the audioplayer should go
var audio = document.createElement('audio');
audio.src = sound;
audio.controls = "controls";
if (currentSound != null){
soundcv.replaceChild(audio,currentSound);
} else {
soundcv.appendChild(audio);
}
currentSound = audio;
}
By the way, I am also trying to enlarge the audio button that shows up in the iphone (the default one is quite small), with no luck so far - would be grateful for any ideas!
The latest Android browser in FroYo does not yet support the HTML5 audio element. This is not a bug, rather a feature that has yet to be implemented. It may come in Gingerbread.
Update: The Gingerbread browser has the audio element.
Here is link to Google Android bug, which filed for lack of support of AUDIO tag in Android.
Please, vote on it.
http://code.google.com/p/android/issues/detail?id=10546
BTW, there is work around, which let you play natively MP3 in Android 1.6 .. 2.2, like that:
<video src="test.mp3" onclick="this.play();"></video>
I cannot figure this out either. BUT, this test page created by Apple plays HTML5 audio on the Android: http://www.apple.com/html5/showcase/audio
how did apple do it?
Have you checked your audio format ?
I was having trouble on my Kindle Fire, and found one small thing which seemed to fix it.
<audio>
<source src="someclip.mp3" type="audio/mpeg" />
</audio>
I had mistakenly been using "audio/mp3". I'm using a player without its native controls (using HTML5/JS).
I got this working on a project using trigger.io deploying to a Nexus 7 running Android Jellybean, but the audio only plays if I use absolute URLs at the moment. I'm not sure what the relative path is yet to use audio from within my project, but hopefully this will help somebody out...
(function() {
var currentSound;
// I have a div called "page"
var soundcv = document.body;
// This only works for one sound for simplicity's sake
function playSound(sound){
if (currentSound == null){
var audio = document.createElement('audio');
audio.src = sound;
soundcv.appendChild(audio);
currentSound = audio;
}
currentSound.play();
}
// This isn't a real audio file URL - replace it with one of your own
playSound('http://example.com/example.mp3');
})();
I've been tinkering all day on this and I finally got mine to work on my old Samsung Droid browser with the yahoo webplayer:
<script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"></script>
Works great puts a little arrow icon next to the text that you can click to play your mp3. Thanks Yahoo.
I forgot to mention that the audio does NOT show up in my Chrome or Firefox browser when testing this locally. Works great on my phone browser though.
I know this is a hack, but it works everywhere (as far as I know)!
You can use the video element and convert your mp3s into mp4 and ogg files (ogg for firefox on android). You could also style it so it doesn't display any uneccesary default players. See code below:
<video id="audioTest" width="1" height="1" style="top: -100px; left: -100px; position: absolute;" preload >
<source src="audio.mp4" type="video/mp4">
<source src="audio.ogv" type="video/ogg">
</video>
You could then play it in your js code using:
var audioTest = document.getElementById("audioTest");
audioTest.addEventListener("ended",onSoundComplete,false);
audioTest.play();
in body
<audio id="myAudio" src="audio/bomba.mp3"></audio>
in javascript during the event
document.getElementById('myAudio').play();