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
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'm using code from here:
https://github.com/TwilioDevEd/video-quickstart-php
to develop a webRTC web app.
The example application, when running successfully on 2 browsers, creates the following HTML:
<div id="remote-media">
<audio src="blob:https%3A//myAddress.com/8a537e34-9ab2-4bea-a85d-61e5f80b585c"></audio>
<video src="blob:https%3A//myAddress.com/22b23b46-9021-4f15-9ab5-ffb78fec2d48"></video>
</div>
<div id="local-media">
<audio src="blob:https%3A//myAddress.com/740c8e33-cc60-4d1e-b1fe-2c23742e618d"></audio>
<video src="blob:https%3A//myAddress.com/3105d4a2-cd71-4408-8b7c-771cba677829"></video>
</div>
It works on Chrome and Firefox on a PC, and works on Firefox on Android.
Chrome on Android connects, there is video and audio input which is visible and audible on the remote browser, and there is video output - the video streamed from the remote browser. THE PROBLEM: there is no audio output.
I have tried $("audio").autoplay="true"; in the javascript that creates the <audio> element.
I have opened other web pages from the same Chrome installation on the same device (eg. YouTube) and I have audio and video.
What am I missing?
"On iOS, and Chrome for Android, autoplay doesn’t work; users must tap the screen to play the video."
source:
https://developers.google.com/web/fundamentals/design-and-ui/media/video/quick-reference?hl=en#autoplay
My solution:
<button id="audioOn" onclick="$('#remote-media > audio')[0].play()">Cant hear? Click me!</button>
Having trouble getting HTML5 audio to play in Safari. Works in IE, Chrome, Firefox.
I have both an MP3 and OGG embedded in my code (tried swapping both just in case, still nothing).
I'm using the MediaElement.js HTML5 audio player. My js is fine.
I have setup MIME types in my .htaccess - nothing.
Any ideas?
(Also not playing on iOS devices as well)
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:
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();