I've been testing a web app and for some reason lots of the audio that should play onLoad fails to play in many cases. Is there a better strategy to ensure audio plays on all devises/ browsers?
Here is my code:
$( document ).ready(function() {
var audio = document.getElementById('audio1');
if (audio.paused) {
audio.play();
}else{
audio.currentTime = 0
}
});
HTML:
<audio id="audio1" src="https://LINK.wav" ></audio>
(Edited based on comment feedback -thanks!)
Wave files are uncompressed audio and tend to be really large files that need to be downloaded. This is why Mp3, Ogg, or AAC are preferred as web formats. Not all browsers support each one though. Firefox doesn't support AAC, and IE and Safari don't support Ogg. You can use caniuse to check.
HTML5 audio would be set up like:
<audio controls preload>
<source src="https://LINK.m4a" type="audio/mp4" />
<source src="https://LINK.oga" type="audio/ogg" />
</audio>
Information from this article on HTML5 audio types.
You have to include the file type, like
<audio id="audio1" src="your_filepath/LINK.wav" type="audio/wav"></audio>
But if you only supply a WAV file, some browsers won't be able to play it (like IE)
It's more reliable to supply mp3 and ogg files, like this:
<audio>
<source src="LINK.ogg" type="audio/ogg">
<source src="LINK.mp3" type="audio/mpeg">
</audio>
At least one of these two is understood by every browser, and the (compressed) files are much smaller, so it won't take that long until they load and start to play.
Related
I am trying to add audio in my code
<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>
and above code is working fine.. but i am facing problem if audio is quite big. i have to wait for couples of second to listen the audio,
is there is any alternative for the same so we can play audio instantly without any wait?
I found one solution , see if it works :
You can use the following property of audio element to solve your problem!!
Preload hinting:
You can optionally use the preload attribute to give the browser a hint as to whether, and how, it should preload the audio file when the page loads. Preloading the audio file means it can play instantly when the user hits the “play” button, which is a nicer experience for the user.
<audio preload="auto">
<source src="WhiteChristmas.mp3">
<source src="WhiteChristmas.ogg">
</audio>
Refer this site:
https://www.elated.com/html5-audio/
you could try to check the spelling...i to had this problem but when i checked and corrected the spelling of the file,it loaded instantly.The code is:
<audio controls
Your browser does not support the audio element.
It's very simple to design an audio player with HTML5 :
<audio controls>
<source src="http://picosong.com/cdn/27590d7ce366627ec0d20d06ec2bbe1c.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
I would like to set a starting point (ex: 1'26") and a duration (ex: 10 seconds), i.e. the player shouldn't display the whole audio file, but only these 10 seconds.
How to do set start point and duration with HTML5's <audio> with plain HTML5 or HTML5+JS? (i.e. no big third party JS library)
You can set the playback range in audio files url.
Like this #t=[starttime][,endtime]
mdn article
Example:
<audio controls>
<source src="http://picosong.com/cdn/27590d7ce366627ec0d20d06ec2bbe1c.mp3#t=120,130" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
flowplayer html5 5.4.6
chome 35+
in flowplayer html5, on chrome i kept getting html5: video encoding not supported or html5: video not found.
I load flowplayer via javascript and have a playlist defined like so:
$(function () {
$('#fp').flowplayer({
playlist:[ [
{ webm: "/usermedia/update_sets/140704/videos/02-480p.webm"},
{ mp4: "/usermedia/update_sets/140704/videos/02-480p.mp4"} ] ],
splash: true
});
});
i checked the video format of the mp4 and all was well. I can even drag and drop the mp4 into chrome and it plays np.
in chrome dev tools i opened the network tab and can see that it tries to open the webm file, get partial content, then cancels the get get.
it never tries to load the mp4 file.
So i tried reversing the order so that mp4 was the first in the playlist.
voila. video plays no problem.
I also tested in firefox and it works without issue.
The question is, why does flowplayer html5 on chrome fail if webm source is specified first in the playlist?
='(
take a look here
i hope this helps you
the browser checks what works but it looks from top to bottom so if the first works for him he wil use it so change the order and it suppose to work
to give an example to you
<div class="flowplayer">
<video>
<source type="video/webm" src="http://example.com/intro.webm">
<source type="video/mp4" src="http://example.com/intro.mp4">
<source type="video/ogg" src="http://example.com/intro.ogv">
</video>
</div>
now webm will go first,
if you change it to:
<div class="flowplayer">
<video>
<source type="video/mp4" src="http://example.com/intro.mp4">
<source type="video/webm" src="http://example/intro.webm">
<source type="video/ogg" src="http://example.com/intro.ogv">
</video>
</div>
.mp4 go first.
I've got an audio file being played with the basic HTML5 audio tag:
<audio controls itemprop="audio">
<source src="http://mysite/mus/my_music_file.mp3" />
</audio>
I'm using Audio.js along with the audio tag for serving up a fallback flash version, as well as a nicely designed player.
In Chrome and Firefox, everything is working as it should, and it's showing the length of the track. Safari is showing: Infinity:NanNan in the spot where the song's length should be shown.
I did a search and found a few similar questions, but both seem to be talking about PHP headers? I'm not using PHP with my audio files, but it is within a Wordpress theme. Could that be an issue?
you should indicate the codecs, and not preload
<audio preload="none" controls>
<source src="/path/to/the/source" type="audio/mp3" codecs="mp3"/>
</audio>
I've got some trouble with the <video> element I guess. I have a little demo page where I'm running a video. That file is available in .webm, .mp4 and .ogv. The video is played properly in Firefox (10) mac+win, Safari mac, Chrome mac.
Neither the windows version of Safari nor Chrome plays/shows that video file (maybe a Webkit issue?). This is how the HTML code looks:
<video controls>
<source src="video/chicane.webm" type='video/webm; codecs="vp8, vorbis"'/>
<source src="video/chicane.mp4" type="video/mp4"/>
<source src="video/chicane.ogv" type="video/ogv"/>
</video>
I'm also using a .htaccess file to normalize MIME types, looks like
# Video
AddType video/ogg ogv
AddType video/mp4 mp4 m4v
AddType video/webm webm
Having a look into Chromes or Safaris developer tools (network tab), it looks like it chooses to play the .webm file, but it can't figure the mime type (shows undefined), plus it seems like it trys to access the files twice.
Have a look yourself:
http://www.typeofnan.com ("awesome tab")
I have no clue why it works fine on OSX with both browsers, if someone can spot an error on the site please let me know. At present, I do some feature detection and use Javascript to .play() the video. However, if I use the autoplay attribute on the <video> tag, Chrome at least plays the audio, but still no video at all.
Reference: Site source on github
Here's what I did to get it to work. Since the browser accepts the first video it can play, I put the WEBM version first and Chrome has no problem with it.
Have you tried to add codecs additional info into each <source> ?
Maybe WebKit cannot automatically recognize codec used to encode the video source.
// from html5rocks.com, see link on the bottom of answer
<video>
<source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
http://www.html5rocks.com/en/tutorials/video/basics/#toc-markup
It works on my machine : Windows 7 Family + Chrome 16.
What I did is that I opened the Developer Tools.
Then, I added the autoplay="autoplay" to the video tag. Next, I edited the html source tag related to the webm format so that I could have :
<source src="video/chicane.webm" type="video/webm; codecs=\" vp8, vorbis\"">
Maybe it was simply an escape problem (with the double quotes).
I wrote this markup from scratch using your video URLs, and it seems to work fine:
<video controls width="360" height="360">
<source src="http://www.typeofnan.com/video/chicane.mp4" type="video/mp4">
<source src="http://www.typeofnan.com/video/chicane.webm" type="video/webm">
<source src="http://www.typeofnan.com/video/chicane.ogv" type="video/ogg">
<span title="No video playback capabilities, please download the video below">Your video</span>
</video>
<p>
<strong>Download video:</strong> MP4 format | Ogg format | WebM format
</p>
See Video for Everybody.