I know that Apple's docs say that an mp3 within an <audio> tag on iPhone OS can't be played without user intervention (they cite bandwidth concerns, totally reasonable). However, has anyone succeeded in faking a user action to play the audio? Perhaps faking events to off screen native audio controls with JavaScript? I'm using jPlayer right now which works great on desktop Safari, but is silent on my iPad.
I'm prototyping a touch interface using WebKit on the iPad, and audio is an integral part of the experience, so yes, I do have a good reason to want to override this convention.
I'd appreciate any help. Thanks.
I had this same problem ... wanting to be in control of the playback of sound from the "get go" as it were.
My solution was to put the audio tags in a hidden DIV like this.
<div id="junk" style="display: none">
<audio id="effect1" src="..." autobuffer="autobuffer" controls="" ></audio>
<audio id="effect2" src="..." autobuffer="autobuffer" controls="" ></audio>
<audio id="effect3" src="..." autobuffer="autobuffer" controls="" ></audio>
</div>
Then in my javascript I have code like this in a play routine.
function playEffect(x) {
var a = document.getElementById('effect' + x);
if (a && a instanceof Audio) {
if (a.currentTime) { a.currentTime = 0; }
a.play();
}
}
So ... you follow the rules because the "required" UI Control is there but of course it doesn't interfere with the web page. The check for currentTime in the playEffect function "rewinds" the sound ... if you don't do that, it won't play a second time.
This worked for me on iPad and iPhone as well as Safari on my Mac. I haven't tested IE for compliance. My page was integrated with Google Maps API v3.
Related
In an Angular WebApp, I want the user to be able to play a few seconds of an audio file.
I don't want the full audio controls, only a play button.
This works on all devices and platforms (also on iPad!), but not on iPhone(safari or chrome). Here is the code:
The source looks like this: //this.src = 'https://p.scdn.co/mp3-preview/17dc74947c15bfaf6ea9bbb83489fb07eac57c27?cid=4c51f7e54bd546e7a04d4141ff59ce8f%22';
<audio #audioElement preload="auto" src="{{src}}"\>\</audio\>
<span (click)="paused ? play() : pause()" class="icon-align-middle"\>
<mat-icon id="preview" \*ngIf="paused" class="icon-size-30"\>play_arrow\</mat-icon\>
</span>
When I set controls to true on the audio Element, it works, but I want to keep it minimal and I can't limit the time of playback (I only want to play it for 2 or 3 seconds).
Is there a way to make it work on an iphone?
How can I set a poster image using particular video frame (flv)?
I don't have image file available, so I wonder if it's possible to set a poster image "in the fly" from the video source.
No, that's not possible with JW Player.
Edit: A little more explanation.... JW Player doesn't actually "play" or "process" the video in any way. It's just a steering and styling script - it feeds the video to the browser's <video> tag if the browser can handle it, or to the Flash plugin. The player provides its own control bar, advertising capabilities, and so on, but when it comes to the video file itself, the player isn't touching it. So, there's no way to do things like extracting certain frames. The player isn't ffmpeg.
Here is a little bit of a hack you can use:
<div id="myElement"></div>
<script>
jwplayer("myElement").setup({
file: "/uploads/myVideo.mp4",
autostart: true,
mute: true,
controls: false
});
</script>
<script>
setTimeout(function() {
jwplayer().pause();
jwplayer().setMute(false);
jwplayer().setControls(true);
},3000);
</script>
What this does is basically autostarts the player, muted, with no controls, then after a second, pauses the player, and sets the controls and volume back. Essentially it is grabbing the first frame. Keep in mind this is a bit of a hack and isn't great for bandwidth.
In an iOS app you can set application.idleTimerDisabled = YES to prevent the phone from auto locking.
I need to do this in mobile safari for a game like Doodle Jump where the user may not touch the screen for an extended period of time. Is there any documented method or hack to do this?
(Update)
They seem to be doing it somehow in this site http://www.uncoveryourworld.com. Visit from your iphone and when you get to the buildings/street scene with music playing in the background just leave your phone alone. It never goes to sleep.
(Update 2)
I've spent some time taking a closer look at how they might be keeping the phone from going to sleep. I've done a barebones test and it seems that the way they are looping the audio in the street scene is what keeps it from going to sleep. If you'd like to test this just put a simple audio player that loops on your page and click play:
<audio src="loop.mp3" onended="this.play();" controls="controls" autobuffer></audio>
Everywhere I searched it is being said that this isn't possible, so it is nice to see there is at least some way to do it even if a bit of a hack. Otherwise a browser based game with doodle-jump style play would not be possible. So you could have a loop in your game/app if appropriate or just play a silent loop.
NoSleep.js seems to work in iOS 11 and it reportedly works on Android as well.
Old answer
This is a simple HTML-only method to do that: looping inline autoplaying videos (it might also work in Android Chrome 53+)
<video playsinline muted autoplay loop src="https://rawgit.com/bower-media-samples/big-buck-bunny-480p-30s/master/video.mp4" height=60></video>
See the same demo on CodePen (includes a stopwatch)
Notes
Avoid loading a big video just for this. Perhaps make a short, tiny, black-only video or use
To make it fully work, the videos needs to be always in the viewport or you need to start its playback via JS: video.play()
Edit: This work around no longer works. It is not currently possible to prevent the phone from sleeping in safari.
Yes, you can prevent the phone to sleep using an audio loop. The trick won't start automatically, you will have to play it when the visitor touches the screen.
<audio loop src="http://www.sousound.com/music/healing/healing_01.mp3"></audio>
Test page: tap play and the display will stay on but it will dim on some devices, like an iPhone with iOS 7.
Note: be careful using this trick because it will stop any music that the visitors might be using—and it will annoy them.
No, you can't do this, unfortunately. The only way to achieve this is by making a UIWebView-application and setting the variable you provided there.
https://stackoverflow.com/a/7477438/267892
[edit] random bug behavior, sometimes lockscreen media controls showing, sometimes not
Years later, updated my code
Easy steps :
unlock audio context
create silent sound
loop it and play forever
keep tab active
Working on Safari iOs 15.3.1, tab & browser in background, screen off
// unlock audio context
let ctx = null;
// create silent sound
let bufferSize = 2 * ctx.sampleRate,
emptyBuffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate),
output = emptyBuffer.getChannelData(0);
// fill buffer
for(let i = 0; i < bufferSize; i++)
output[i] = 0;
// create source node
let source = ctx.createBufferSource();
source.buffer = emptyBuffer;
source.loop = true;
// create destination node
let node = ctx.createMediaStreamDestination();
source.connect(node);
// dummy audio element
let audio = document.createElement("audio");
audio.style.display = "none";
document.body.appendChild(audio);
// set source and play
audio.srcObject = node.stream;
audio.play();
// background exec enabled
Even if this approach might not be suitable in every case, you can prevent your phone from locking by reloading the page using Javascript.
// This will trigger a reload after 30 seconds
setTimeout(function(){
self.location = self.location
}, 30000);
Please note that I tested this with iOS7 beta 3
You can stop sleeping and screen dimming in iOS Safari by faking a refresh every 20–30 seconds
var stayAwake = setInterval(function () {
location.href = location.href; //try refreshing
window.setTimeout(window.stop, 0); //stop it soon after
}, 30000);
Please use this code responsibly, don't use it "just because". If it's only needed for a bit, disable it.
clearInterval(stayAwake); //allow device sleep again when not needed
Tested in Safari iOS 7, 7.1.2, and 8.1, but it may not work in UIWebView browsers like Chrome for iOS or the Facebook app.
Demo: http://jsbin.com/kozuzuwaya/1
bfred.it's answer works if you replace the audio-tag with a enter code here -tag - but only if the page is open in iOS10+ Safari AND the user has started the video. You can hide the video with CSS.
Also, I suspect that this feature will also be removed at some point.
This is based on nicopowa's answer, which saves a PWA from being suspended by iOS. (Playing an infinite loop of nothing keeps the app running - even with the screen turned off.)
In order to also make sure that it's triggered by user interaction,
the only thing to change is instead of
let ctx = null
put
let ctx = new AudioContext()
How can I get an MP3 audio file to play in iPhone Safari (OS 3.1)?
Currently, I am generating HTML e.g.
<img src="sound.png" alt="Play audio"/>
to play the file on clicking on the nested image. This works on Safari on OSX, but not on the iPhone. There, the content of the file is shown as text, but it does not appear to be a mime-type problem when checked with Live HTTP Headers from Firefox.
I have found approaches referenced here. These require the Safari Plugins setting to be on in the preferences, which is why it did not previously work for me.
I imagine your best bet is to invoke a quicktime object in your web page. For playing mp3 files, your best bet is to serve a Winamp .pls style playlist with mimetype audio/x-scpls that serves as a signpost to the mp3 files. Create an embedded quicktime object around it. Try the docs for quicktime:
http://www.apple.com/quicktime/tutorials/embed.html
If you manage to get it working, it will play in the QuickTime Application (Full screen).
The HTML5 sound API is not available in the current iPhone OS (3.XX), but in OS 4.XX it will be available (at least playing video without launching the full screen player)
Use the HTML5 audio tag with an mp3 in it. http://www.w3schools.com/tags/tag_audio.asp
Hey this simple html5 tag will do the trick
<audio src="someUrlToContent" controls="controls"> </audio>
what this does on the iPhone is bring up a play button that when pushed will go to quicktime.
on the iPad, a scrubbing play control will come up with a play/pause button. on both, the play control will size to the div they are in
As jottos points out, iPhone 3.x does not support HTML5 audio. If you want audio in the early versions of iPhone OS, you must use Quicktime specific code. This example actually embeds an entire playlist (not just a single song). If you want a single song, drop the qtnext parameters:
<embed
src="riding-with-the-king.jpg"
href="songs/01-riding-with-the-king.mp3"
artworkdata="riding-with-the-king.jpg"
type="audio/x-mp3"
target="myself"
scale="1"
controller="false"
loop="false"
autoplay="false"
allowembedtagoverrides="true"
height="500"
width="500"
qtnext1="<songs/02 Ten Long Years.mp3> T<myself> E<controller=true autoplay=true loop=false>"
qtnext2="<songs/03 Key to the Highway.mp3> T<myself>"
qtnext3="<songs/04 Marry You.mp3> T<myself>"
qtnext4="<songs/05 Three O'Clock Blues.mp3> T<myself>"
qtnext5="<songs/06 Help the Poor.mp3> T<myself>"
qtnext6="<songs/07 I Wanna Be.mp3> T<myself>"
qtnext7="<songs/08 Worried Life Blues.mp3> T<myself>"
qtnext8="<songs/09 Days of Old.mp3> T<myself>"
qtnext9="<songs/10 When My Heart Beats Like a Hammer.mp3> T<myself>"
qtnext10="<songs/11 Hold on I'm Coming.mp3> T<myself>"
qtnext11="<songs/12 Come Rain or Come Shine.mp3> T<myself>"
>
I had issues with mp3 on my local development system (Linux/apache2). I was only apple to play .OGG files in both Firefox(8) and Chrome(15) from the local file system. If I used the audio tag to link to a remote .MP3 or .OGG file either would work though? I am not sure why this is the case and since most of my local music files are MP3 it took me awhile to figure out that it was the file format that was the problem.
in my iPhone app, I have an UIWebView with some simple HTML links to audio files.
When the user opens such an audio file, media player plays it an leaves my
UIWebView with this screen:
alt text http://img.skitch.com/20090622-rnx614kynh8faecjmuiyec159b.jpg
How do I dismiss it after the audio file was played?
I've searched for UIWebView's delegates without finding something useful.
Mike, I've found a solution: Create a HTML page and embed your audio file the follwing way:
<embed src=”http://www.mypage.com/test.wav”>
This gives you an embedded mini player.
No, you can't dismiss that properly, or at least I couldn't figure out how to do it. So I just used the movie player for all my audio and video. It's a little more complex but it is much more flexible.