I am working on an audioguide Svelte application, and I need to be able to play the audio tracks from a playlist.
Since I don't have the duration of files beforehand and I have to display it, this is what I am doing:
For each track, load the metadata with <audio> and update the duration
Once duration is fetched, remove the <audio> from the DOM
{#if !loadedMetadata}
<!-- svelte-ignore a11y-media-has-caption -->
<audio hidden preload="metadata"
bind:duration
on:loadedmetadata={() => loadedMetadata = true}
on:stalled={() => console.log((id + 1) + ' stalled')}>
<source src={url} type="audio/mpeg">
</audio>
{/if}
My problem:
The audio elements get randomly stalled on Chrome, but not on Firefox or Safari. This doesn't seem to be caused by Chrome only Loading 6 HTML5 audio tags: sometimes I have only 5 elements and they all get stalled, sometimes I have 11 and everything works fine.
Related
I have added Audio to a webpage, to play once it loads, which works fine in Internet explorer but not in Google Chrome.
<audio autoplay>
<source src="gears_01.ogg" type="audio/ogg">
<source src="gears.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
I then added the following Javascript and gave the audio element the ID audioId. Again this worked perfectly in IE, but still nothing in Chrome, unless I Hit the CTRL and F5 keys together a couple of time and then chrome would play the audio file.
var audio = document.getElementById("audioId");
audio.autoplay = true;
audio.load();
I have tried a host of code snipets and suggestions from various forums etc, but i just can't seem to get chrome to autoplay the audio. If i add controls it is fine, it just wont autoplay.
UPDATE:
So i have discovered that if i load the page from a link then the audio plays, but if i just type in the URL of the page, nothing happens.
I'm not sure on the reason why Chrome can be funny with autoplay. I tend not to trust it. This isn't really an answer for your question, but a work around for the problem.
Instead of using the autoplay attribute on the audio control. Use the canplay event on the element.
var audio = document.getElementById("audioId");
audio.oncanplay = function(){
audio.play();
}
audio.load();
When the canplay event is fired, call play() on the audio element to start playing. You're creating your own auto play. Just remember unless you remove the event, any time the audio control loads a new file and can play the audio, the event gets fired. I tend to use this method to give me more flexability pre-playing the audio/video.
I am trying to use tag to play mp3 in a page. The website is based on WordPress. The audio players do not appear in safari but working others browser.
This is the page url: http://soundhealingcenter.com/love/braintests/
Here is the code I am trying to use:
<audio controls="controls">
<source src="http://soundhealingcenter.com/online/BetaA.mp3" type="audio/mpeg" />
</audio>
The audio players * do appear* in Safari, and the audio can be played back properly. It just seems that all audio is loaded simulataneously, and since each one is about 20 minutes, that takes a lot of time, also depending on connection speed. In my case, the second one finished loading first, then 4, 5, 9, 10. The others are still loading (and can't be started yet therefore).
So you might want to consider deactivating the automatic loading on page load by adding the attribute preload="none" to the audio tag, so that would be
<audio controls="controls" preload="none">
<source src="http://soundhealingcenter.com/online/BetaA.mp3" type="audio/mpeg" />
</audio>
I also faced a issue like this and by preload attr in audio tag fixed it.
Since my audio files are small, i used preload = auto. Safari will start playback only once the complete audio is downloaded.Here is my Ref:https://codepen.io/aravi-pen/pen/OxPaVb.You can Refer here for more about preload tag:https://html.com/attributes/audio-preload/
Thanks!
I am using html 5 video tags to display a video as my sites desktop hero image. It works without issue in chrome and Fire Fox, loading almost instantly. But in IE 11 and I assume earlier versions, it takes about 10 seconds to load. I am not sure why this would be. mp4 video is 16MB, and the other formats are smaller.
<video autoplay loop class="hero-video">
<source src="/img/10_Seconds_w_o_Matte.mp4" type="video/mp4" codecs="avc1.4D401E, mp4a.40.2" />
<source src="/img/10_Seconds_w_o_Matte.ogg" type="video/ogg" />
<source src="/img/10_Seconds_w_o_Matte.webm" type="video/webm" />
<source src="/img/hero2_img.jpg" />
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
Chrome removed h264 support several years ago https://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html
So Chrome and Firefox are coming into your code and skipping past the mp4 and loading the smaller files while IE 11 only supports mp4 so it must load the larger video.
Your problem is with the size of your mp4. Guessing by the name of the files it looks like you might be able to do some funny business with a animated gif instead of the video for IE if you'd like it to load faster. Just a suggestion. Unfortunately if that is the smallest the mp4 will get and you must use a video file then you are kind of stuck with it loading slow in IE.
Context:
Making an advanced video-player using web components technology (polymer-project.org) I have found some problems when I tried to include 2 instances of the video-player playing the same video resource. Analyzing the problem I have realized that it has nothing to do with polymer but with the HTML5 video tag only on Chrome browser.
Problem:
The source of my test html page contains essentially the following code:
<video id="video1" width="100%" controls>
<source src="/test/resources/video1.mp4" type="video/mp4" >
</video>
...
<video id="video2" width="100%" controls>
<source src="/test/resources/video1.mp4" type="video/mp4" >
</video>
The effects of the anomalous behavior can be outlined as:
The second video does not show the first frame (a black player is shown instead)
Trying to play the second video player it does not work
The first video player works as expected
After pausing the first video, the second one appears on the player
Now the playing command on step 2 seems to respond and start suddenly the second player
Summing up, it is impossible to play both videos simultaneously. This only happens on chrome (neither on Safari nor Firefox) and when the video resource is the same one.
Question:
Does anybody have a suggestion about how can I proceed in order to fix the problem with chrome?
I cannot figure out how to incorporate ogg files into a playlist for an HTML5 tag. Right now I read files from a directory JSON object that formats as follows:
var playlist = [{"url":"mp3\/122911.mp3","title":"122911"},
{"url":"mp3\/100909.mp3","title":"100909"},{"url":"mp3\/011110.mp3","title":"011110"},
{"url":"mp3\/061207C.mp3","title":"061207C"},{"url":"mp3\/110309.mp3","title":"110309"},
{"url":"mp3\/120409.mp3","title":"120409"},{"url":"mp3\/031608.mp3","title":"031608"},
{"url":"mp3\/100609C.mp3","title":"100609C"},{"url":"mp3\/120408.mp3","title":"120408"},
{"url":"mp3\/012908.mp3","title":"012908"},{"url":"mp3\/032107.mp3","title":"032107"}]
that works wonders and loading the ogg files into that object is not the issue. I just need to know how to tell firefox that the ogg files are there. Is there a parameter I'm missing in order to do that along with 'url' and 'title' in the JSON? I know it can go right in the audio tag if I'm just creating everything statically, but I'm not. The audio tag is simply:
<audio class="aud" autoplay>
<p>Your browser doesn't support HTML 5 audio.</p>
</audio>
and it works just fine with the mp3s in chrome and safari so far. I know I'm missing something simple. I have the ogg files, just confused about the parameters in the playlist I suppose. Thanks!
How this is working?
<audio class="aud" autoplay>
<p>Your browser doesn't support HTML 5 audio.</p>
</audio>
There is no source. Are you dynamically adding <source> to the <audio>?
Let me tell how it works:
You can specify multiple <source for the <audio>. Browsers will look top to bottom in the <source>s and try to play the first one it supports. So, if you write this way:
<audio class="aud" autoplay>
<source src="music.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML 5 audio.</p>
</audio>
This will be sufficient. Browses, that support mp3, will use the first source. If the browser, like firefox, that does not support mp3 will discard this and look next. It will find .ogg next and will play that one.
You can see more here:
http://www.w3schools.com/html/html5_audio.asp