Play a sound via javascript event in iOS 5 HTML5 app

2024/2/27 7:20:45

Developing an HTML 5 application on new iPad's Mobile Safari iOS 5 that displays a user prompt when a "dispatch" is received. To bring attention to the user, we have a sound that plays like this when a alert function is called:

snd.src = snd.src;
snd.play();

Unfortunately, Apple changed the methodology for playing sounds. Does anyone know if there are updates in iOS 5 that fixes this?

*Did a lot of research and already aware that the old "hack" in iOS 3 no longer works.

Answer

The sounds require user input in iOS5. You can initialize the sound with an "invisible" button that disappears after one press at the initialization of your app. Once triggered, you should be able to call snd.play() programatically. It's kind of a cheat, but hopefully it helps!

Javascript:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {document.write('<a id="init" ontouchstart="javascript:sndInit();"></a>');function sndInit(){snd.play();snd.pause();document.getElementById('init').style.display = 'none';}
}

CSS:

<style>#init {position: absolute;margin-right: 0px;margin-left: 0px;margin-top: 0px;margin-bottom: 0px;z-index: 1000;}
</style>

Also, Remy Sharp has some tips on working with audio sprites HERE.

http://en.ppmy.cn/q/41621.html

Related Q&A

JavaScript this keyword and arrow function

Here this keyword which is in arrow function points to objs variable environmentvar greeting = hi;const obj = {greeting: hey,fo() {const greeting = hola;const arrowFo = () => {console.log(this.greet…

Looking for derivative script

I am desperately looking for a JavaScript that can calculate the first derivative of a function. The function always includes only one variable, x.e.g. f(x) = xf(3) = 2xConsequently, the script should …

Firebase Realtime Database - Error: Client is offline. React/NextJS

Using React with NextJS the following error occurs occasionally when fetching data from a Firebase Realtime Database. Unhandled Runtime Error Error: Error: Client is offline.I am using Firebase 9.0.1 f…

Javascript interface with RS-232 Serial Port

I am currently working on a project that involves a 4 Port A/V switch. This switch can be controlled via RS-232.The computer that will interface with the switch runs Vista. I would like to create a s…

Returning the default value for the key that cannot be found in the javascript object

When a key that is not in the object is called, it returns undefined. I want to return a string that I specify instead of undefined. for examplelet obj = {key1: key1 } let res = obj.key2;console.log(re…

Convert GMT to IST (India Standard Time) using javascript?

I have a date format is GMT or UTC.var mydate = 2020-01-14T17:43:37.000ZI want to convert this date in IST format so according to this date the output I need in this format.var date = 2020-Jan-15 12:4…

How to express idempotent (self flatten) types in TypeScript?

There are types with self flattening nature that is called Idempotence:https://en.wikipedia.org/wiki/IdempotenceIdempotence is the property of certain operations in mathematics and computer science wh…

How to test a component with the Router tag inside of it?

About:Hey there, at the moment I am trying to write tests with jest and the react testing library for my react components. I also use react-router. The Problem:I want to check if the app routes to the …

jquery ui droppable on parent child issue

I am using jquery ui droppable widget. I have the following structure :Example Fiddle<div class="parent">parent<div class="child">child</div></div>Both paren…

How to set a resolution/density in JPEG/PNG image in Javascript?

I need to change the resolution/density in JPG/PNG type of images in javascript. The reason I need to do this is so that I can send the image to a third party API which will then know how many pixels p…