I used a sound in my HTML page and wrote a JavaScript function to play it at a specific time. The problem is that when I load the page in PC, it works well, but on mobile the sound doesn't play. What is wrong?
<audio id="buzzer" controls="controls">
<source src="assets/sound/buzzer.mp3" type="audio/mpeg" />
function PlaySound1() {
var audioElement = document.getElementById('buzzer');
audioElement.setAttribute("preload", "auto");
audioElement.autobuffer = true;
var source1 = document.createElement('source');
source1.type= 'audio/mpeg';
source1.src= 'buzzer.mp3';
audioElement.appendChild(source1);
audioElement.load();
audioElement.play();
};
Most mobile browser require direct, physical interaction to begin audio playback. Meaning you cannot trigger initial playback on page load or in any asynchronous function (like setTimeout).
You can try out UbaPlayer, which comes with a Flash fallback for older browsers.
Support table (from HTML5 Doctor: HTML5 Audio – The State of Play)
Mobile Browser Version Codec Support
Opera Mobile 11.0+ Device-dependent
Android 2.3+ Device-dependent
Mobile Safari (iPhone, iPad, iPod Touch) iOS 3.0+ MP3, AAC
Blackberry 6.0+ MP3, AAC
Did you check out the table of browser support http://www.w3schools.com/html/html5_audio.asp
There is nothing wrong in your code. By default mobile browsers will not autoplay sounds because the browsers creators don't want that to be exploited by websites. I pretty much gave up as well since I couldn't find anything online.
After 8 months or so, I switched from iPhone to Android and I found that both Chrome and Firefox have permissions options inside their browsers to allow a certain website to play sounds.
In iOS at the moment, I don't see such an option for Safari nor Chrome browsers.
I have attached pictures from Android Chrome browser settings:
Related
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.
I cannot play audio with Chrome Mobile on Android. Is it restricted from playing audio (OGG)?
So, I've an HTML document. Inside, is the following audio tag:
<audio id="audiotag1" src="beep.ogg" preload="auto"></audio>
I also trigger the audio to play with JS:
document.getElementById('audiotag1').play();
The audio plays fine in Chrome desktop but doesn't play at all in Chrome Mobile. Are there some restrictions/flags I should know?
Chrome for Android requires a user-gesture to play the sound audio file. Make sure that your play invocation is on an event such as click.
Yes only Mozilla I believe really support that format on mobile
I'm trying to get HTML5 videos to play on mobile devices. They seem to run fine on the latest version of iOS, but I'm getting a lot of inconsistency with Android devices.
I'm using video.js and listening for a click on a thumbnail image, which in return replaces the element with a HTML5 video and plays it automatically. The following code flat out doesn't work on the Android emulator (clicking on a thumbnail does nothing). When I try it on my own Droid Razr, it begins to load the video and then the browser freezes up. This happens in the native browser and Chrome, which tells me it's something native to the device.
$(".video").live("click", function(e) {
e.preventDefault();
$(this).replaceWith("<video id='" + $(this).data("video-id") + "' class='video-js' preoload='auto' width='100%' height='100%' poster='" + $(this).data("video-poster-url") + "'><source type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"' src='" + $(this).data("video-url") + "'></video>");
video = _V_($(this));
video.ready(function() {
this.play();
this.requestFullScreen();
});
});
The HTML ends up being:
<video id='fv3530' class='video-js' preoload='auto' width='100%' height='100%' poster='/posters/fv3530.jpg'>
<source type='video/mp4; codecs="avc1.42E01E, mp4a.40.2" src='/videos/fv3530.mp4'>
</video>
Does anybody know why this would cause an Android device to totally freeze up, and what I can do to make videos run consistently on most Android devices?
Thanks!
Please se this question: HTML5 <video> element on Android
Apparently, there is a possibility to use HTML5 videos with android, according to http://developer.android.com/about/versions/android-2.0-highlights.html
But there are some strict parameteres in order to make this work (see checked response to the question).
In your case, It is not easy to handle events with the emulator, especially html5 etc, so you should allways use a real device for testing (really recommanded). In which concerns your phone, the possibly reason why it is not working is that yu are using a non supported video codec.
Remove the type attribute from the source declaration. This usually causes issues with Android, older versions especially.
Your source declaration should simply be:
<source src='/videos/fv3530.mp4'>
I have a small site which has a working HTML5 video on Android (just tested it on my HTC Desire running Android 2.2).
I am trying to open m.youtube.com using an ordinary browser but to be able to play the videos using HTML5 (instead of the default RTSP playback). To do that, I spoofed User-Agent in Firefox, and added there a string corresponding to iPhone's Safari UserAgent string. After I've done that, I see a nice "iPhone-like" version of the Youtube (instead of an ordinary m.youtube.com for other mobile devices). But the video, when selected, is not being played (on a "User-Agent-spoofed" Safari i can hear only sound, on "spoofed" Firefox the video is hung with a spinning "video is loading" icon). Why that might happen? what kind of features of Safari for iOS HTML5 version of youtube site may use that the video is not played in desktop Safari and Mozilla?
I have checked the Desktop browser requests and responses with Wiresharked, and found the GET request which corresponds to the video asked (the request's Content-type is video/mp4). But the playback works always only on the iPhone's Safari.
What may be the reason? I tried to look into HTML5 code of the Youtube page that contains video player, but there's so much JavaScript (most of HTML is being generated dynamically) that I got lost in it.
Is there any way to make it work on ordinary browsers (I can modify the requests/cookies on-the-fly)? I'd like to have an iPhone-styled youtube with HTML5 on my desktop browser.
Thank you
I wrote a quick test with audio in HTML5. It worked on Chrome, Firefox 3.6 and Opera but I haven't tested on Safari. It turns out Safari on Windows and iPod doesn't support this. I know Flash is used as a fallback for older browsers on some sites but that's not an option for the iPod.
How do I play sound on webpages? I see YouTube uses rtsp but I can't tell if that requires an app or not (its not my iPod) and seems like overkill?
Safari only supports .mp3 audio files - you need to convert the file from .ogg to .mp3, and include both with the source element, like this:
<audio>
<source src="sound.mp3" />
<source src="sound.ogg" />
</audio>
Or use a feature detection script like Modernizr, allowing you to change the source based whether the browser supports it.
See also: http://html5doctor.com/native-audio-in-the-browser/
Does this work? Add it as a javascript function...I believe that webkit supports it so it should work in iOS, Android, Chrome, and Safari.
var audio = new Audio("sound.mp3");
audio.play();