I'm using GoogleCloudStorage::serve() to serve .mp3 files via a website on Google App Engine with an HTML5 audio tag. Everything was working fine, but after an update for iOS, these devices were unable to play the audio in any browser.
I'm not sure why the code stopped working. Everything else still works fine on Android and Windows in all browsers.
It doesn't relay on Javascript or auto play at all. It's just a simple audio tag with the source being provided by GoogleCloudStorage::serve(), which works everywhere except recently on iOS.
Any input would be appreciated.
This is a shot in the dark because I don't know anything about serving audio files on iOS, but in case it helps...
About the same time you posted this question, a friend asked me to help him with his website. The website previously played audio, but around the time of your question, the audio stopped working on Safari on OS X.
The existing audio player that was being used was Flash based. I switched his website to playing audio using HTML5 and then it worked fine.
So you may want to check if you are playing audio in iOS with a Flash player and change it to HTML5 if you can.
Do you rely on autoplay? iOS disables autoplay, you really have to
let the user touch a button, or something.
Quote from Apple's documentation:
In Safari on iOS (for all devices, including iPad), where the user may
be on a cellular network and be charged per data unit, preload and
autoplay are disabled. No data is loaded until the user initiates it.
This means the JavaScript play() and load() methods are also inactive
until the user initiates playback, unless the play() or load() method
is triggered by user action. In other words, a user-initiated Play
button works, but an onLoad="play()" event does not.
This plays the movie: <input type="button" value="Play"
onclick="document.myMovie.play()">
This does nothing on iOS: <body onload="document.myMovie.play()">
Related
I am working with a school group that has a Django website with a page that allows the users to press a button, record audio, and save this audio to their user pages. This website was built to work on computers and Samsung tablets with Dolphin browsers using the HTML Media Capture to capture the audio by launching the microphone app on the tablets. The group wants to now switch to iPads. I have been researching ways to launch the microphone app from iPads but it seems this is not possible using HTML5. I have done some research and seen the links below, but I don't know what the best strategy is to modify the existing website to make it work on the iPad.
What is the best way forward to allow this group to record audio (not video) from their iPads using a browser-based website?
Research--
http://caniuse.com/#search=getUser - shows getUserMedia will not work on iPads
http://www.html5audio.org/2012/11/capturing-audio-on-ios-6-via-the-videotag.html - looks pretty hacky, does it work?
How to record and play voice in ios6 using HTML5 - using PhoneGap might work, but how would the recording app be launched from the browser and then save back the audio to the users account?
Thanks,
Lee
After having the same problem for a year, I found a new article with a solution: How to record audio from a mobile web page on iOS and Android
One of the newer APIs available is the MediaRecorder API. My first attempt at building this application started with this class. I implemented the entire application and it worked great on my desktop. It was easy to capture audio and the data was already compressed into .ogg format and ready to ship to my server. Then I tried it on iOS. It turns out that the MediaRecorder API is not supported and wouldn’t meet my needs. After I stopped cursing Apple, I began again from scratch.
... That was the last piece of the puzzle that allowed me to construct a working demo and it revolves around three steps:
1. Capture the microphone so we can begin recording
2. Accumulate captured audio data into a series of byte array chunks
3. Combine the chunks into one large array and massage the array into the format of a .wav file
There is a bunch of code on the website. And here is the demo file: https://www.gmass.co/blog/wp-content/uploads/2018/03/wzrecorder.zip
I have tested it and it works on iPad.
Demo: https://q2apro.github.io/wzrecorder/
Safari iOS does not (yet) support the accept="audio/*" part of the <input> element even though it does support taking videos and images through HTML Media Capture.
<input type="file" accept="audio/*" > on iOS 10 will prompt the user to select between:
Take Photo or Video
Photo Library
iCloud Drive
More...
The same code works just fine in Chrome on Android.
Safari in iOS6 was the 1st mobile Safari to support the <input ... > element and I've tested all the way up to iOS10. Chrome on iOS uses the same rendering engine so the same limits apply.
See http://jsfiddle.net/rCGSB/4/.
Using the seekTo method from the YouTube iframe api does not work in mobile Safari under iOS 6 using an iPad 3.
The video just starts playing at the beginning. Once the video is playing, the seekTo method works. However, as stated in https://developers.google.com/youtube/iframe_api_reference#Playback_controls for the seekTo method:
"Seeks to a specified time in the video. If the player is paused when the function is called, it will remain paused. If the function is called from another state (playing, video cued, etc.), the player will play the video."
So, the video should start playing at the specified time even if it's not playing. And since I am interacting with a click, the disabled autoplay under mobile Safari should not be the problem.
It works fine on all desktop browsers I tested (FF, Safari, Chrome under Mac OS).
Does this work at all under iOS? Feel free to edit and update the fiddle.
Being able to playback from a certain point in time in a YouTube video is something I've been interested in for a long time.
I've found that this bit of iframe-based markup works, at least on iOS 6:
<iframe width="480" height="270" src="http://www.youtube.com/embed/n1-OKPmQyh4?fs=1&feature=oembed&start=533" frameborder="0" allowfullscreen="1"></iframe>
The trick is the "start" parameter in the URL you're using for the iframe
I've also wanted the "autoplay" parameter to work, but from my understanding Apple prevents that from happening so as to avoid excess data charges for users viewing web content.
I have built an app, designed to play each sound as the first one is finished by using 'ended' event.
In my initial version, each sound has its own audio element, resulting in something like:
function play_next_audio(){
speaker = $('audio#' + sounds[i++]).get(0);
speaker.addEventListener('ended',play_next_audio);
speaker.play();
}
This works great on all desktop browsers, including Safari, but does not go beyond the very first letter on iOS.
I have also tried a different approach - a single audio element that loads each sound in turn. There I experimented with binding the 'ended' event as well as loading first and binding 'canplaythrough' event instead. In both cases, it fails to work even on the desktop Safari - this time successfully playing the first two letters.
Here is the isolated test:
http://dev.connectfu.com:42001/app/test-sounds.html
Note that audio.load() is commented out several places - having it in or out seems to make no difference.
What am I doing wrong? How can I play series of sounds on iOS? Thank you so much for the help!
update As of 2017, the ended event doesn't fire on Safari (or Chrome) on iOS under several conditions. More information can be found here: It's almost 2017, and HTML5 audio is still broken on iOS.
I've built an HTML5 audio player (Chavah Messianic Radio) that "works" on Safari on iOS.
By "works", I mean, it plays the best it can on Apple's crippled iOS <audio> implementation. At the time of this writing, this includes iOS 5. I've tested this on iPhone 3 and up, and iPad original, iPad 2, and iPad 3.
Here are my findings:
Apple does not allow you to call .play on any audio until user interaction. For me, this means detecting iOS, then showing the music as paused until the user clicks play. Their reasoning is that this will consume data and battery; in practice, though, it just cripples web apps and stifles the evolution of the web.
If you want to play successive sounds (one after another), use a single element. When it's time to play the next sound, set existingAudio.src, then call existingAudio.load(), then call existingAudio.play(). This will allow you to play successive sounds.
Audio events don't fire if Safari is in the background.. While audio will continue playing if the user switches to a different app, the .ended event won't fire. This means it's practically impossible to build a music player app.
Hope this helps.
<rant>
In the meantime: Apple, please, please, please give us better support for HTML5 in iOS Safari. Here are your action items, Apple:
Let HTML5 audio work in the background.
Support OGG.
Support pre-loading audio.
Support concurrent audio.
Let us play audio without user interaction.
Do those things, Apple, you'll be the industry leader in mobile HTML5 audio, everyone will emulate you, you'll once again be leading the way, and web apps will work perfectly on your platforms, while being crippled on other mobile platforms. Yes, these features will use data and the battery, but native apps already do this. Stop crippling web apps and be the leader. Make HTML5 <audio> a first-class citizen on iOS.
</rant>
I don't believe the .play() method is supported for audio or video in iOS. Apple does not like the idea of videos or audio automatically playing upon visiting a page.
Here is a helpful reading about the state of HTML5 audio support across platforms: http://www.phoboslab.org/log/2011/03/the-state-of-html5-audio
I am working with jQuery mobile and using the HTML5 audio tag. I have a single button to trigger the playing of the audio on the page. I trigger the audio playback with the following:
$('#voice').live("click", function() {
$('#speech').trigger("play");
});
The audio tag is simple:
<audio src="path_to_media" id="speech"></audio>
When a page is first loaded the audio works perfectly however the audio tag and source on not updated on page transition, so going to another page with different audio and clicking play will play the same audio file as the first page unless of course I manually refresh the browser. Is there any way around this?
Can't specify your problem exactly however I've done exactly the same thing here: http://blog.colourbomb.net/?p=193
It performs fine on Desktop and iPhone but on Android I see the same behaviour you have, one solution is to delete the audio tag from the DOM, then create a new one and inject it giving you a new instance of an audio object that should be reset. Which platform are you seeing the issue on, do you get it happening in a desktop browser too?
I want to automatically load local video and audio without clicking/swiping, etc. on a PhoneGap application on the iPad. I'm considering creating an objective-c plugin, would this be the correct way or is there another work around i.e. a plugin, javascript way etc?
Given that a phonegap app is basically a wrapped webapp, I think you may be out of luck, apple requires a user action to play media on the iPad (actually, audio, I don't know either way for video). Here's a source.
See the user controls or media playback controls section. Even though your data is local, the play action is disabled without an action