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/
Related
Using React, I'm using JavaScript (play()) to make two audio tags play 2 different .mp3 files (at completely separate times). The .mp3 files are short (less than a second).
import sound1 from 'sound1.mp3';
import sound2 from 'sound2.mp3';
<audio controls muted>
<source src={sound1}></source>
</audio>
<audio controls muted>
<source src={sound2}></source>
</audio>
audio {
display: none;
}
In Safari 13.1.2, on my 13-inch MacBook Catalina, often, one of the sounds plays imperfectly - it's as if the start of the sound isn't heard. Here's a video of me demonstrating what the sound's really like against what it should be like. When the black piece moves, you'll need to turn your volume all the way up to hear a quiet, echoey noise. Then I play you how that file's supposed to sound.
When on my iPhoneX, in Chrome & Safari, the same sound (seemingly) fails to play at all. This may be explained by this SO answer which says that sound won't play unless from a callback from an event handler that involves the user's physical participation e.g. click. This theory fits my case.
My question is similar to this post and this post which got no response. If you think it'd be useful for me to recreate this problem with a Sandbox I could try.
Personal note:
On my 13-inch MacBook Catalina:
on Chrome both sounds work fine.
in Safari, sound2 works imperfectly.
on my IPhoneX:
on Chrome & Safari sound2 is sometimes audible later on.
EDIT:
In this video you can hear me playing back the problematic audio file in Finder. I play it the first time - fine; but the second+ time it makes the same incorrect sound heard in the browser!
Replacing the problematic audio file with a different audio-file brings success - and suggests the problem lies with the audio-file and not my implementation of it in the website. I'm willing to reframe this problem as a poorly performing audio-file but I really don't know. If this were the problem, my only recourse to avoid it would be replaying the audio-file in Finder and making sure it plays a consistent sound.
I've got a quick n dirty trial here,
<body>
TEST
<audio src="preview1.mp3" id="audio"></audio>
</body>
Then in my javascript console on desktop, I do the following:
var audio = document.getElementById('audio');
audio.play(); // the first audio plays just fine!
audio.pause();
audio.src = 'preview2.mp3';
audio.play(); // the second audio plays fine, too!
However, when I do the exact same thing on any mobile device (specifically iOS and Android devices are the ones that I've tried), absolutely nothing happens. No audio plays at all.
I've done a ton of searching online but it doesn't seem to be the case for anybody else?
Thoughts?
If you are having trouble with your audio player, please note that 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 by the iOS. No data is loaded until the user initiates it. This means that the audio player is inactive until the user initiates playback by clicking on the play button.
For Android devices:
Chrome does not allow applications to play HTML5 audio without an explicit action by the user, similar to how it is handled by iOS, but differently than how the stock Android browser handles it.
Reference: http://www.wix.com/support/html5/technical-difficulties/browser-compatibility/faq/my-video-is-not-playing-on-my
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>
I'm creating a simple metronome web app that also displays a random note for training purposes. It works fine on desktop, but on my iPhone (IOS7) there seems to be an issue with the multiple audio elements I'm using.
I'm using one sound for the first accented beat of the measure, and then a different sound for the rest of the beats. The two audio elements look like this:
<div id="audioHide" class="hide">
<audio id="beepOne" src="http://ivandurst.com/metronome/sounds/beat.wav" preload="auto" controls="controls">Your browser is not supported. Get a better standards compliant browser!</audio>
<audio id="beepTwo" src="http://ivandurst.com/metronome/sounds/accent.wav" preload="auto" controls="controls">Your browser is not supported. Get a better standards compliant browser!</audio>
</div>
JSFiddle and Live on my site
When I hit "play" on my iPhone in the jsfiddle, I hear the first sound every first beat, but it doesn't play the second sound for the rest of the beats. Everything else works perfectly. The reason I share both links is because it behaves different in the live environment - Sometimes it only plays the first sound every beat, sometimes it plays both sounds and works properly, and sometimes it says "The operation could not be completed" and/or plays nothing.
I'm not planning on selling this as an app or anything and it doesn't have to be perfectly accurate. I just want to share it as a web app with my friends who are trying to learn the notes on an instrument. Any thoughts on what's wrong here, or ideas for a possible workaround if it's a bug/known issue?
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