Phonegap Build, HTML5 Audio, Android - javascript

I'm developing this app for a local radio as part of community outreach type deal for my company (placement student) i kinda threw myself in at the deep end and decided to go with building this website -> app with only a tiny knowledge of the technologies i'm using however it's working quite well at the moment i'm just having a problem with the following.
So basically i'm trying to stream some audio using html audio tags. This works in my browser but not in my emulator (ripple emulator, nexus 4) nor on my android phone (HTC One).
Technologies - HTML5, CSS, Jquery Mobile and Phonegap Build.
I feel like i probably have to do something with Javascript.
<audio controls>
<source src="http://195.10.228.6:8035/canal.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Thanks for any help!
EDIT: to clarify i am able to see the audio player and also interact with it, it either just won't play sound or it doesn't play the stream not entirely sure.

<audio id="stream" preload='none'>
<source src="audio source" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
play!
<script>
var stream = document.getElementById('stream'),
ctrl = document.getElementById('audioControl');
ctrl.onclick = function () {
// Update the Button
var pause = ctrl.innerHTML === 'pause!';
ctrl.innerHTML = pause ? 'play!' : 'pause!';
// Update the Audio
var method = pause ? 'pause' : 'play';
stream[method]();
// Prevent Default Action
return false;
};
</script>
This code fixes most things it will allow you to play through your phone and also only has a play/pause link. you can do any styling you wish later on.
problems-takes about 10seconds prior to clicking play to load ~ atleast for my stream anyways for local files probably alot easier

You need to include more sound formats, as the MP3 isn't probably supported. According to http://html5please.com/#audio you have to include at least OGG and AAC formats.
Also beware that Opera Mini does not support the audio tag at all. You should include a polyfill, some were mentioned in the first link (http://html5please.com/#audio).

Have you looked into adding your external site to the config.xml whitelist?
Documentation for this is available:
http://docs.phonegap.com/en/2.7.0/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide

Related

Cannot get WebAudio to play through iOS 8

I have been trying to get WebAudio working in Safari on iOS8 (i have succesfully got it working in Windows and on Android devices).
It is my understanding that you cannot automatically play webaudio through Safari on iOS, but instead you must trigger the first WebAudio call through a user action (e.g. a button press). Then once this first user-driven action is done, WebAudio will work.........Apparantly.
So i have a button set up (using JQM) like this:
Enable Audio<hr />
"PlayDing" is a function which looks like this:
function PlayDing(DingType) {
var sound = new Audio('../../UI/Audio/' + DingType + '.mp3').play();
}
The idea is that by clicking the "Enable Audio" button, this triggers a user interaction to play an mp3 file (which is just 1 second of silence) and then subsequent audio events will just work.
Any ideas why this is not working on iOS8 / Safari?
EDIT:
If i change my JQM button to play a proper ding sound, it works fine and my iPad plays the ding.
EDIT 2:
This is nothing to do with playing audio files from my iPad's music library. This is about playing files / resources that are part of the website.
"It is my understanding that you cannot automatically play webaudio through Safari on iOS, but instead you must trigger the first WebAudio call through a user action (e.g. a button press). Then once this first user-driven action is done, WebAudio will work.........Apparantly."
You are completely right about the handling of the playing. To avoid playing unwanted sounds or unwanted download of sounds onto users devices possibly using up monthly data - a soundplay has to be called in the same stack as the user's touch/click.
There are multiple of things you have to deal with to make sure all your users can reliably play the sound. One thing is it has to be downloaded before you play it. To achieve this we use a technique called preloading.
You also have to take into account that not all users support the same audio format.
An example of your HTML and Javascript could be as follows:
Javascript:
function PlayDing(DingType) {
//Get a reference to the audio element
var sound = document.getElementById(DingType);
//Play it
sound.play();
}
HTML:
<body>
<!--Declare the sounds in as many formats as possible and let the user's browser handling what sound to play & caching -->
<audio id="Silent" preload="auto">
<source src="'../../UI/Audio/silent.ogg" type="audio/ogg">
<source src="'../../UI/Audio/silent.wav" type="audio/wav">
<source src="'../../UI/Audio/silent.aac" type="audio/mpeg">
</audio>
Enable Audio
<hr />
</body>

Unable to pause videojs on load if autoplay is enabled

this is my first question in stackoverflow so pardon me for mistakes.
I've been trying to create a simple CMS using videojs in which user could upload their video and customize their attributes (eg: autoplay, loop and controls).
When they change the attributes I will automatically recreate the whole tags and reinitialized it. I did this so it gave the correct preview especially on firefox since user will upload mp4 and firefox will give the "not supported" warning sign if I did not reinitialize it (videojs will automatically converts into flash).
Now the problem is when user checked the "autoplay" attributes because when I initialize the video it will automatically plays and I don't want that kind of behavior in the CMS (though I want that behavior in the published site).
I've been trying to pause the player once it was ready but it still plays.
My hypothesis is that the command to pause was fired before the command to play from the autoplay attributes.
This is the html tag used for this
<video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg" autoplay preload="auto" data-setup="{}">
<source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
</video>
And this is the one I used to initialize and pause the video
_V_(example_video_1).ready( function() {
var myplayer = this;
myplayer.pause();
});
Any idea? Help is greatly appreciated. Worst case if all else fails I could use different tags for the preview and published site (no autoplay for the preview). I create a fiddle for this : http://jsfiddle.net/F8JhL/2/
EDIT: I noticed that sometimes the pause event really works though not automatically (about 1 to 2 second after the video plays) but more often it doesn't work at all.
I find the same issue when using version 4.1.0 of videojs. When I upgrade to version 5.1.0 this conflict is missing.
You could download the latest version at https://github.com/videojs/video.js/releases
So I think this bug has been fix (but I can't find the commit revision for this fix).

HTML5 video behavior on mobile devices

I am building a site where I have several <video> elements (looped animations) that act as part of my design (not as an actual video). This works quite well in desktop browsers, yet I am in trouble on mobile devices.When I display the site on Android or iOS devices (ie. mobile webkit) I will get the OS's video player appearance and the videos will open in some sort of popup when I click them. I do know that I can bypass the autoplay restrictions by doing sth like:
window.onload = function() {
var pElement = document.getElementById("myVideo");
pElement.load();
pElement.play();
};
But this will again open the video(s) in a seperate window...
Does anyone know of a possibility to emulate / enable desktop-like behavior on mobile devices? Thanks!
EDIT:
Markup is basic <video>-syntax btw:
<video autoplay loop>
<source src="vid.mp4" type="video/mp4" />
<source src="vid.ogg" type="video/ogg" />
<source src="vid.webm" type="video/webm" />
</video>
Hmm, I'm not sure about Android but iOS devices can't run multiple video streams simultaneously:
Multiple Simultaneous Audio or Video Streams
Currently, all devices running iOS are limited to playback of a single
audio or video stream at any time. Playing more than one video—side by
side, partly overlapping, or completely overlaid—is not currently
supported on iOS devices. Playing multiple simultaneous audio streams
is also not supported. You can change the audio or video source
dynamically, however. See “Replacing a Media Source Sequentially” for
details.
No, Android or iOS devices (ie. mobile webkit) are not able to run video as you are wanting . Video will open in a default video player of device.
YouTube uses a mov or mp4 with ios to load the native look and feel for videos, or it links out to their app to play the video since it's installed on every ios device.
Why do you need windows.onload to bypass autoplay? If I remember correctly setting the preload tag to none
<video src="vid.mov" preload=”none”></video>
should work.
Also, have you tried using the Video For Everybody approach? With that should be able to get the video to play in the web page rather than by the phone's OS, that way I believe you can achieve the same effect on supported devices.
EDIT: In regards to j08691's answer, an alternative approach for iPhones could be to design a simple web viewer app for the site for iPhone which has a workaround for the no-multiple video playing problem.

Can't get wav files to play on iPad using Safari

I have a web application that I have built and it needs to have three different kind of alerts. Single beep, long beep and triple beep. All the audio files are in .wav format. The application works as expected with all beep notifications playing at the right time on a Mac or PC, with IE, FireFox, Chrome and Safari on Mac.
When I run the application on an iPad it only wants to play the single beep and will play it every time it is supposed to. When it's supposed to play the long beep or triple beep, it doesn't.
Can somebody please tell me why this is happening and what I can do to get this working? This web application was built to run on the iPad and full web browsers. This is the last thing that needs to be worked out, before the application is completed.
Thanks in advance. :)
Here is my code for the audio tags and the javascript that makes it work.
HTML
<span style="visibility:hidden; display: none; ">
<audio src="./sounds/beep.wav"></audio>
<audio src="./sounds/longBeep.wav"></audio>
<audio src="./sounds/tripleBeep.wav"></audio>
</span>
JavaScript
function playBeep() {
var beepAudio = document.getElementsByTagName('audio')[0];
beepAudio.play();
}
function playLongBeep() {
var beepAudio = document.getElementsByTagName('audio')[1];
beepAudio.play();
}
function playTripleBeep() {
var beepAudio = document.getElementsByTagName('audio')[2];
beepAudio.play();
}
All the audio files are using the same codec and the format.
Only one audio tag at a time is supported on MobileSafari.
Use one audio element and change the src attribute using JS. Then call load/play when required. This is described in detail here.
IOS supports sound play, but not autoplay. You must bring up a control that forces the user to hit a play button for the sound to start playing.
http://www.ibm.com/developerworks/library/wa-ioshtml5/

Play sound in iPhone web app

I assume there might be a HTML5 or some JS that can be used to play sound?
Before you mark this as duplicate, this question is old, so I believe outdated:
Play sound in iPhone web app with Javascript?
Maybe you could use a JS event, send a event to your UIWebView delegate and then play a sound with in objective-c ?
Best solution I think ^^
For a solution in HTML5 I have no idea.
You could take a look at
Sound effects in JavaScript / HTML5
But I'm not sure this solution would work on all device. It depends if you need to play the sound "often" or not.
The current version of mobile Safari (iOS 5.0.1) has poor audio HTML5 support. The play method of an Audio object will work sporadically, but only as the result of direct user click and it will not preload (expect a random delay on first play.) This makes it impractical to use audio in your iPhone web applications at this time.
If noticed some issues in Chrome but otherwise seems to work in other major browsers.
HTML:
<audio id="sound_example" title="Sample" autobuffer>
<source src="sample1.wav" type="audio/x-wav">
<source src="sample2.ogg" type="application/ogg">
<source src="sample3.mp3" type="audio/mpeg">
</audio>
Javascript:
var playThis = document.getElementById("sound_example");
if (!playThis.paused) {
playThis.pause();
playThis.currentTime = 0.0;
}
tmpAudio.play();
Obviously you'll need to provide your own wav, ogg, or mp3 to try this yourself. The check for it being paused is there so if the condition is met, it will reset before playing it again.
If you'd like to skip the audio tag altogether you can go with this:
var sound_example = new Audio("sample3.mp3");
sound_example.play();
There are some minor pros and cons to both approaches but if you're needs are straight-forward then either should suffice.

Categories