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.
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.
We ran into a very strange problem with JW Player and really don't know an approach to solve it.
JW Player shows the error:
Error loading media: File could not be played
sporadically across all browsers and platforms (sometimes it shows up and sometimes not). It took me over 30 reloads to get it and some of my colleagues got it with their first try. It's behavior is very inconsistent and kind of random.
We're using FirstSpirit as CMS on an Apache Tomcat instance running on Windows server. The problem occurred on Chrome, IE and Firefox across all versions.
The MIME types of all videos are correct as their codecs are. If supported, JW Player is running in HTML5 mode. We use Flash only for older browsers (IE8 groan).
I would appreciate any help. Thanks!
Marcus
UPDATE:
Example page with video box on the right side. Example page with video
UPDATE:
We updated the version as Ethan from JW Player suggested, but it's still not working properly.
I would suggest to encode the video in .mp4 and .ogg. (MP4 is supported in Safari and IE9, Ogg in Firefox, Chrome and Opera and as you mentioned IE6-8 uses flash only). Thus your video element will look something like:
<video width="300" controls>
<source src="my_video.ogg" type="video/ogg">
<source src="my_video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
This will ensure that the video will be played if the browser support HTML5. I hope this helps
Our application has a lot of videos to play on HTML page, at the beginning. I tried both object and video tags to play these videos, but I found the problem of cross-browser compatibility, these 2 tags can't work well on IE 6/7/8. Absolutely, we are not able to develop a new video player to do it, and I guess video playing is a very common case for Java EE development, so I want to ask if there is any good way for us to play videos with good cross-browser compatibility.
Thanks.
Try jplayer which is compatible with Windows : IE6, IE7, IE8, IE9, IE10, IE11 and also works well on Opera mini and android browser.
http://www.jplayer.org/
Doing something like the following will allow you to play videos on most browsers:
<video controls>
<source src="myVideo.mp4" type="video/mp4">
<source src="myVideo.webm" type="video/webm">
<object type="application/x-shockwave-flash" data="player.swf?videoUrl=myVideo.mp4">
<param name="movie" value="player.swf?videoUrl=mVideo.mp4">
</object>
</video>
In this case player.swf is a Flash player such as those available with popular video players like MediaElementJs (which of course you could simply use instead) which plays MP4 files. Or if you have a Flash flv file you can play it here without the player.swf.
You should also include the html5shiv file so that the video element is not ignored by these older browsers.
But you may have tried all this, so an example of the code you tried that didn't work would be useful to see.
I am working on a project, and my current task is add a feature to listen audio file directly in the web page. What options do I have? All files are mp3, and the page contains about 15 audio files
Unfortunately, the flash player looks like only one possible solution and I just hope if somebody will give me a clue how to make the feature done without it.
Update: Thanks for the direction with audio tag!
The short answer is that native HTML5 audio will not work in all browsers (such as IE6, 7, and 8). Likewise, Flash audio will not work in mobile Safari. Your best bet for a production-grade solution is an audio abstraction framework that will use either HTML5 or Flash-based audio based on the client's browser. Fortunately, there is such a framework, based in jQuery, called jPlayer.
The <audio> tag! Note that different browsers support different compression solutions. Currently OGG Vorbis seems to be the most appropriate format to convert the audio into.
Edit: I seems that some browsers support OGG and some browsers support MP3. If you can, have both versions available and upload both. Then, in the markup have a declaration that looks like this:
<audio controls autobuffer>
<source src="audio.mp3" />
<source src="audio.ogg" />
</audio>
Try the audio tag in html5
http://www.w3schools.com/html5/tag_audio.asp
http://html5doctor.com/native-audio-in-the-browser/
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();