Issues with playing audio may arise in a Cordova Phonegap app on iOS

My goal is to develop a cross-platform soundboard app using Cordova Phonegap. While the Android version runs smoothly, I am encountering difficulties with the iOS version when it comes to playing sounds. I have implemented SoundJS and PreloadJS for loading and playing audio files. Through the Phonegap remote debugging server, I discovered that iOS identifies the audio as "application/octet stream" (refer to images).

Everything functions as expected on Android.

Android

However, the issue arises with iOS.

iOS

This is how I load the audio:

var sound3 = "sound3";
createjs.Sound.registerSound("audio/anybody.mp3", sound3);

$(function(){
    $( "#sound3" ).bind( "tap", tapHandler ) 

    function tapHandler( event ){
        sound3.play();
    }
});

I would appreciate any assistance in resolving this matter.

javascriptioscordovaaudio

Answer №1

I encountered a similar issue while working on a Cordova project.

One possible reason for this could be:

The problem may arise due to different browsers or web views being able to play only certain types of audio formats. It is important to have your sound files in multiple formats, such as mp3 or ogg, and detect the supported format before playing the sound. Refer to the documentation on Audio canPlayType for more information.

Another potential reason could be related to file system issues. The path to resources on iOS may not match that of Android, so it is crucial to create platform-specific paths for accessing local resources before initializing the sound.

Additionally, consider using native browser audio instead of relying on createjs. Here's an example code snippet to play audio using native browser support:

var sound3 = document.createElement('audio');

sound3.src = "audio/anybody.mp3";

function tapHandler( event ){
    sound3.play();
}

$(function(){
  $( "#sound3" ).bind( "tap", tapHandler ) 
});

Answer №2

Have you experimented with utilizing an m4a audio file (aac)? It appears that this is the preferred format for Apple. Additionally, ensure that there is only one sound playing at any given time as iOS is capable of handling only one audio playback at a time.

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 utilizing the latest Vue features within a single file component

Currently in the process of learning Vue.js, I've encountered a small problem: I have a single file component containing an array of checkboxes. While referring to the documentation on working with multiple checkboxes, I found that the provided exampl ...

javascriptcheckboxvue.js

What is the best way to determine which array to manipulate based on its current state?

I'm facing an interesting challenge where I need to determine which array to map over based on the length of shownAppointments. {shownAppointments.length ? shownAppointments .flat() .map((appointment) => ( ...

javascriptreactjs

Exploring JSON with JavaScript

[ {"lastName":"Noyce","gender":"Male","patientID":19389,"firstName":"Scott","age":"53Y,"}, {"lastName":"noyce724","gender":"Male","patientID":24607,"firstName":"rita","age":"0Y,"} ] The data above represents a JSON object. var searchBarInput = TextInput. ...

javascriptjson

Expand or collapse in a sequential manner

Is there a way to ensure that only one table row expands at a time, causing the others to collapse? Any suggestions on achieving this? Here's the HTML code snippet: <table class="table"> <tbody> <tr class="parent" id="2479"> ...

javascriptjqueryhtmlcss

Angular.js input[radio] encountering issues of being undefined and remaining unchecked

I'm encountering two issues that may be linked to the same bug: 1.) I am unable to set a default check for a radio button on my HTML page. All three radio buttons remain unchecked. 2.) The value for selectedValue in my code is consistently returning ...

javascriptjqueryhtmlangularjs

Uploading a file to NodeJS via POST and seamlessly forwarding it to another API without storing it on disk

In order to transfer a file from a user through a React UI (with axios), then send it to a NodeJS method via POST using Express, and finally forward the same file directly to another API (.NET WebAPI) without saving it to disk, I am faced with an issue whe ...

javascriptnode.jsexpressasp.net-web-apiaxios

When the page finishes loading, execute a Javascript or JQuery script

I am struggling to display the feedback from the two functions, correct[] and wrong[], as the user responds to the questions. I have attempted to use the jQuery ready function in order to ensure that everything appears before the prompts, but so far it has ...

javascriptjquerydocument-readydomready

Are cookies with the http_only attribute included in requests made through AJAX?

While browsing the web, I came across this interesting link However, it also mentioned at the bottom that This information may no longer be current. This got me thinking, can http_only cookies be transmitted with AJAX? And can AJAX responses set http_only ...

javascriptphpajaxcookieshttponly

Utilizing Angular to convert a string array into an array of enum values through an HTTP GET request

I have a list of different user roles defined in my typescript code: enum UserRole { CONSULTANT, MANAGER, ... } There is a REST endpoint /users/id/roles that returns an array of strings representing the roles of a specific user: [ "CONSU ...

javascriptangulartypescriptenumstype-conversion

Using JavaScript variables in CSS: a beginner's guide

My website features a typewriter effect, but I want the animation to match the length of the words exactly. I attempted using JavaScript variables in CSS, but unfortunately, it's not functioning properly. Could someone please advise me on how to remed ...

javascripthtmlcss

Trouble accessing value in Vue.js

I'm having an issue where I am unable to access this.active in my method delete. What could be causing this problem? data () { return { ride: { user: {}, location: {}, type: {} }, active: false } }, methods: { delete () ...

javascriptvue.js

The input field is not functioning properly within the vue-drag-resize component

I have incorporated vue-drag-resize from https://github.com/kirillmurashov/vue-drag-resize in my project. Unfortunately, I am facing an issue where I am unable to focus and type anything inside an input text field that is contained within the vue-drag-res ...

javascriptvue.js

Connect the visibility of one object to the visibility of another object

How can I make DOM-element a visible when DOM-element b is visible, and hidden when b is hidden using jQuery? I'm seeking a solution to achieve this effect. Is there a way to accomplish this with jQuery? Thank you in advance! To clarify my question ...

javascriptjqueryhtml

Obtain the initial value and update the information without having to refresh the page using Angular Select

One issue I am facing is to retrieve the default value in the select dropdown Another problem arises when I select an option from the first dropdown menu, the data appears in the second dropdown. However, upon changing the selection in the first dropdown ...

javascriptangulartypescript

Ways to switch the icon when it is chosen

I'm trying to figure out if it's possible to change an icon when it is clicked. Currently, my icon is gray but I want it to turn blue when clicked. I've been having difficulty implementing this in my code and I'm wondering if there is a ...

htmlangularcordovaionic-frameworkionic3

Embracing async-await while awaiting events in node.js

I am attempting to incorporate async await into a project that is event-driven, but encountering an error. The specific error message I am receiving is: tmpFile = await readFileAsync('tmp.png'); ^^^^^^^^^^^^^ SyntaxError: Unexpec ...

javascriptnode.jsasynchronousasync-await

Is it possible to modify the sub/child divs within a draggable parent div and assign them a different class?

Greetings, after being a long-time reader, I have finally decided to post for the first time. In the process of creating a webpage with jQuery drag and drop divs, I am curious about how to change the class of a child div within a draggable div once it is d ...

javascriptjqueryhtmlcssjquery-ui

What is the functionality of the "respond_with_navigational" feature?

Currently, I am integrating Devise and DeviseInvitable to handle authentication in my application. However, I'm facing challenges when trying to incorporate AJAX functionality into InvitationsController#update. The structure of the controller in Devis ...

javascriptjqueryajaxruby-on-rails-3

Tips for displaying content from JavaScript onto a div element in HTML

Javascript function validateForm() { var result; var keywords = document.querySelectorAll('#keywords'); [].slice.call(websites).forEach(function(website) { if (website.value == '') { ...

javascripthtmlecho

Error: The operation cannot be performed as the specified function is invalid

Currently working on some jasmine testing in JS. I've created a testing function that looks good so far (only running the first test at the moment). describe('Anagram', function() { it('no matches',function() { var subject ...

javascriptjasmine