The implementation of the Web Audio API within a UIWebView can disrupt the playback of music in the Music app

An example of using the Web Audio API:

var UnprefixedAudioContext = window.AudioContext || window.webkitAudioContext;

var context;
var volumeNode;
var soundBuffer;

context = new UnprefixedAudioContext();
volumeNode = context.createGain();
volumeNode.connect(context.destination);
volumeNode.gain.value = 1;

context.decodeAudioData(base64ToArrayBuffer(getTapWarm()), function (decodedAudioData) {
    soundBuffer = decodedAudioData;
});

function play(buffer) {
    var source = context.createBufferSource();
    source.buffer = buffer;
    source.connect(volumeNode);
    (source.start || source.noteOn).call(source, 0);
};

function playClick() {
    play(soundBuffer);
}

Running this code inside a UIWebView produces the desired sound, but switching to the Music app and playing a song interrupts the sound when returning to the app with the UIWebView.

However, this issue doesn't occur when running the same code in Safari.

Are there any solutions to prevent this interruption in the sound?

Explore the complete fiddle here:

http://jsfiddle.net/gabrielmaldi/4Lvdyhpx/

Answer â„–1

Are you using iOS? It seems like the issue you're facing could be related to an audio session category problem. In iOS, apps determine how their audio interacts with other audio. According to Apple's documentation:

Each audio session category specifies specific behaviors such as interrupting non-mixable apps audio, silencing audio when the Silent switch is activated, supporting audio input (recording), and supporting audio output (playback).

The default category seems to silence audio from other apps:

AVAudioSessionCategorySoloAmbient—(Default) Allows playback only and silences audio when the user activates the Ring/Silent switch or when the screen locks. It interrupts other audio.

The important point to note here is that it interrupts other audio.

Depending on whether you want your audio to be silenced when the screen is locked, there are other audio session categories you can use. AVAudioSessionCategoryAmbient does not silence audio.

You can try using the following code snippet in the objective-c section of your app:

NSError *setCategoryError = nil;

BOOL success = [[AVAudioSession sharedInstance]
                setCategory: AVAudioSessionCategoryAmbient
                      error: &setCategoryError];

if (!success) { /* handle the error in setCategoryError */ }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for resolving the error message: React is not able to identify the `currentSlide` and `slideCount` prop on a DOM element

I recently implemented an image slider using "react-slick" in my next.js project. However, I encountered some warnings in the console related to the 'currentSlide' and 'slideCount' props on a DOM element. Warning: React does not recogni ...

Is it possible to generate a JSON file from a flowchart with the help of d3.js?

Situation: I'm currently in the process of developing a tool that will enable us to generate flow charts and then export the data into a JSON file for use in other services. Being new to JavaScript, I've come across d3 quite often. Can d3 handle ...

Navigating through Index in #each in emberjs

Take a look at the code provided below: http://jsbin.com/atuBaXE/2/ I am attempting to access the index using {{@index}}, but it doesn't seem to be compiling. I believe that handlebars should support this feature: {{#each item in model}} {{@index} ...

"Enhancing Your List: A Comprehensive Guide to Editing List Items with the Power of AJAX, jQuery, and

At the moment, I am able to edit a list item by clicking the 'Edit' link. However, I would prefer to simply click on the list item itself to initiate the editing process. This is the content of my _item.html.erb partial. In this case, each proj ...

ReactJS Material-UI Tooltip and Popper overlapping issue

How can I make the MUI tooltip appear beneath the MUI Popper, with the popper overlapping the tooltip? Is there a way to modify the z-index for only a specific portion of the elements without affecting the global styles when using external CSS? Here is a ...

jQuery draggable elements can be easily dropped onto droppable areas and sorted

I need help with arranging the words in the bottom tiles by sorting them from "Most Like Me" to "Least Like Me" droppable areas. Currently, I am able to drag and drop the words into different boxes, but it ends up stacking two draggable items on top of eac ...

Stop JSON.parse from shuffling the order of an object

When working on my web application, I retrieve a JSON string from the server and store it in a variable called greetings: var greetings = '{"2":"hoi","3":"hi","1":"salam"}' I have obser ...

Problem with AngularJS Multiselect checkbox dropdown configuration

In my application, I have a pop-up that includes a multi-select dropdown menu. Here is the code for the Multi-Select Dropdown: <select name="edit_tags" class="form-control" id="advisor_article_tagsx" multiple="" required ng-model="article_selected ...

prior to activating a state in angular.js, navigate to a distinct controller

Upon loading my website, I have a specific state in mind that I want to be redirected to. Achieving this is made possible through the following code snippet. angularRoutingApp.run(function ($rootScope, $state, $location, $transitions) { $transitions.o ...

Calculation of time intervals based on input values from text boxes, calculating quarters of an hour

I am facing a couple of challenges: -I am trying to calculate the time duration in hours between two military times input by the user in two textboxes. The result should be in quarter-hour intervals like 2.25 hours, 2.75 hours, etc. -The current calculat ...

There seems to be a syntax error lurking within npm.js, and for some reason npm insists on utilizing version 10.19.0 of Node.js despite my attempts to update it. The reason behind this behavior

Apologies if this question seems silly, but just a couple of days ago my code was running perfectly fine. Then today when I tried to load it, I encountered all sorts of errors. I am fairly new to node and npm, so I suspect it could be related to version ma ...

Troubleshooting a setTimeout filter problem in Vue

Implementing a notification system in Vue has been my latest project. I've created a Notifications component to store error messages that I want to display. data(){ return { alerts: { error: [] } ...

React hooks causing dynamic object to be erroneously converted into NaN values

My database retrieves data from a time series, indicating the milliseconds an object spends in various states within an hour. The format of the data is as follows: { id: mejfa24191@$kr, timestamp: 2023-07-25T12:51:24.000Z, // This field is dynamic ...

Can a new frame be created below an already existing frame in HTML?

My main.html file looks like this: ----- main.html---------------- <title>UniqueTrail</title> <script src="main.js"></script> <frameset rows='200,200'> <frame id='one' src="f ...

General procedure: identifying the specific input element triggering the keypress event, without directly specifying the ID or other identifiers

I am currently working on a Jquery script that handles validation, and I need help selecting the element on which the keypress event is triggered without explicitly passing the ID #elementid as shown in the code snippet below: var element = **choose the ob ...

The property being set in Angular is undefined, causing an error

I am struggling to understand why the code below is not functioning as intended: Main.html <div class="MainCtrl"> <h1>{{message.test}}</h1> </div> Main.js angular.module('myApp') .controller('MainCtrl', f ...

Issue with AJAX call not functioning properly within PHP document

I've encountered an issue with a form that triggers an ajax call upon clicking the submit button. The ajax function is located within a PHP file as I need to populate some variables with data from the database. However, the before / success callbacks ...

Can you help identify the issue in this particular ajax code?

Here is the code I wrote to check if a username exists in the database using Ajax. However, I am facing an issue where the input text from the HTML page is not being sent to the checkusername.php file via $_POST['uname'];. I have tried multiple s ...

Analyzing the functionality of Express with Mocha and Chai

Currently facing an issue with testing my express server where I am anticipating a 200 response. However, upon running the test, an error occurs: Test server status 1) server should return 200 0 passing (260ms) 1 failing 1) Test server statu ...

url-resettable form

Currently, I am working on an HTML form that includes selectable values. My goal is to have the page load a specific URL when a value is selected while also resetting the form back to its default state (highlighting the "selected" code). Individually, I c ...