Safari won't play HTML5/JS embedded audio (MediaElement.js) - javascript

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)

Related

VideoJs flv and chrome

I have a little problem with videojs: flv videos plays well in chrome, however the timing and the timebar don't respond (timing 00:00 even if the video is playing )
I don't have this problem in IE or FF
Thanks for suggesting me some ideas
For playing .flv videos you can using FlowPlayer.org
For playing other than flv videos you can using html 5.0 tag in Chrome, Firefox & IE 11

Sound does not play in mobile

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:

Audio - Chrome Mobile - Android

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

Mobile youtube video and its HTML5 player

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

Play sounds on Mobile Safari?

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();

Categories

Resources