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?
Related
I am trying to play an audio file in the SSML using a code like this :
conv.ask(`<speak>playing sound
<break time="300ms"/>
<audio src="sound.mp3"/>
</speak>`);
it works fine on the iPhone using google assistant if the action is invoked by voice and it plays back the audio, however if I activate the action by typing the action name on keyboard(talk to .....), only the display text is shown and no audio is played back. I am doing something wrong? is there any way to fix this?
it turned out that is the intended behaviour of AoG. If the action is invoked by keyboard, only the text part of the response is displayed and the "audio" tag inside the SSML is ignored. I had to change my response to include a MediaObject and it is now playing the audio regardless of if it is invoked by voice or keyboard.
Currently I am designing an iOS application that will connect to a music stream through a network and play the audio to the user.
I have a simple setup with a button the enables the stream to start, and a UIwebview that connects to the stream. When I run the app (on an iPhone, NOT a simulator), the button works fine and launches the Quicktime player to begin playback for the audio. Pausing and playing from this screen works like a charm as well.
However I want my user to be able to start up the stream, turn the phone off (sleep the display) and continue to listen to the stream. However sleeping the display will fade out the audio until it stops playback.
I have tried to go into the app's PList file like a few others have told me to do online and added the field "Required background modes" and added App plays audio or streams audio/video using Airplay to the 0 array field and App downloads content from the network to the 1 array field.
("App plays audio" was not offered through auto-complete even though that was the phrase told to make the stream work. Instead I left it as "App plays audio or streams audio/video using Airplay" before trying it the other way to little more luck)
However neither of these are allowing the audio to continue to play when the display has been put to sleep. Can anyone offer up a suggestion as to how to make it work?
In Xcode 5.1, there's another place aside from the Plist that this needs to be set, Target -> Capabilities -> Background Modes... this seems to do more than just affect the plist, though I'm not absolutely sure of this.
Look here an sample code https://github.com/jsagorin/iOSBackgroundAudio
and here .. some explanations (how to Set UIBackgroundModes key in app-info.plist file, Set Audio Session Category , etc) http://www.sagorin.org/ios-playing-audio-in-background-audio/
Just make an entry in plist
Application does not require background mode and set its value to 'NO'
And add background Mode to VOIP
I have a working webview in Titanium with an embeded youtube video. The video plays nice, I can stop it, resume it and so on. But when the video plays to the end and I press "done". The webview goes black with the text: YouTube. Nothing else. I would like there to be the same thumb and playbutton as before I played the video.
My embeded code looks like this:
html:'<html><head></head><body style="margin:0"> <embed id="yt" src="'+tubeURL+'" type="application/x-shockwave-flash" width="150" height="113"></embed></body></html>',
I've googled this problem for days now. I hope someone can help me here.
Cheers
//Martin
EDIT: This solved it. Put &controls=1&rel=0 in the end of the URL.
YouTube players can be embedded in a web page using either an < iframe> tag or an < object> tag.
By appending parameters to the SWF or IFrame URL, you can customize the playback experience in your application. For example, you can automatically play videos using the autoplay parameter or cause a video to play repeatedly using the loop parameter or in your case hide or show controls.
controls
Values: 0, 1, or 2. Default is 1. This parameter indicates whether the video player controls will display. For AS3 players, it also defines when the Flash player will load:
controls=0 – Player controls do not display in the player. For AS3 players, the Flash player loads immediately.
controls=1 – Player controls display in the player. For AS3 players, the Flash player loads immediately.
controls=2 – Player controls display in the player. For AS3 players, the Flash player loads afer the user initiates the video playback.
The correct answer for your question would be controls=2.
SOURCE INFO: https://developers.google.com/youtube/player_parameters#controls
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.
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.