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();
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.
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 have this html and js which I'm using to play some audio:
HTML
<div id="audio-clips">
<audio src="/audio/cha-ching.wav" type="audio/wav" id="audio-cha-ching">
</div>
JavaScript
var sfx = $("#audio-clips #audio-cha-ching")[0];
sfx.play();
This is failing in IE 8, due to it not recognising the "play" method. Is there a jQuery audio-playing method which works cross-browser, with the same code? I'd rather do that then try to fall back to some IE-specific solution (as browser-specific solutions are always brittle).
I would strongly recommend using howler.js for playing audio files. It has great compatibility across browsers and devices. It uses HTML5 audio when available, and falls back to older technologies when necessary.
HTML5 support on IE started on IE9 :(.
By the way, I am not sure if WAV is played by IE(I would not say so):
http://en.wikipedia.org/wiki/HTML5_Audio
Fallback solution for HTML and legacy browsers
The audio tag is available in Internet Explorer 9 and above. You can check this using Can I Use - Audio.
The wav format is supported by Firefox 3.6+, Safari 5+, Opera 10.5+ and Internet Explorer 9+ on the audio tag. You would need to add an MP3 source in addition to the wav source to get Chrome support.
To get backwards compatible support, you use the following - Flash element omitted for brevity.
<audio controls preload="auto" autobuffer>
<source src="sound.mp3" />
<source src="sound.ogg" />
<source src="sound.wav" />
<!-- now include flash fall back -->
</audio>
Encode your audio in mp4 format, instead of wav. This works for me in IE 11.
Is it possible to play embedded MP3 on iPad Safari (the way you do on normal desktop browsers) ?
If yes, do we need to code separately for iPad Safari ?
The reason I am asking is bcoz in my app, the desktop code for mp3 is not working on iPad..
The code for desktop is
<EMBED src="'+audioUrl+'" autostart=true loop=false volume=100 hidden=true>
To add to the excellent answers of Blindy and John, the IPad should be HTML5 compliant which means that you can use the HTML5 audio and vido tags. You can read more about this at The Safari Developer Library.
Why don't you just use the <audio> tag, that's what it's there for.
To answer your question, yes it is possible.
You can use the HTML 5 <audio> tag. Check out w3schools - HTML5 Audio.
There is also a table on there telling you what formats work with what browsers.