"IOS exclusive: Encounter INVALID_STATE_ERROR on IOS devices only, not on Android, OSX, or Windows platforms

While developing an HTML5 web page with audio functionality using JavaScript, I encountered an issue. Initially, the basic version of my webpage successfully loaded and played audio files in different formats (e.g., ogg vs mp3) across various OS/browser combinations such as OSX (Safari, Chrome, Firefox), iOS 5 and 6 (Safari), Windows 7 (Firefox, Chrome), and Android 4.2 (Firefox). This basic version consisted of only one JavaScript file.

Upon integrating the audio code into the production version of the website, which includes other JavaScript libraries like jQuery, jQuery UI, and flot, I faced a problem specifically on iOS devices (tested on iPad2 and iPad3 running iOS 5 and 6). The error message displayed was:

INVALID_STATE_ERR: DOM Exception 11: An attempt was made to use an object that is not, or is no longer, usable.

The error occurred when trying to set the current time of the sound object based on a specific sprite data:

mySound.currentTime = spriteData[currentSound].start;

Interestingly, the same code ran without errors on the iOSSimulator for both iOS 5 and 6 simulations.

Seeking advice on how to debug this issue, any suggestions or insights would be greatly appreciated as I'm unsure where to focus my efforts. Thank you.

javascriptiosmobile-safarihtml5-audio

Answer №1

Did you know that Mobile Safari comes with a developer mode that allows for attachment through Safari on a Mac? For more information, check out the Safari Web Content Guide: Debugging Web Content on iOS.

If you're experiencing errors, try breaking down the expression to identify which part may be causing the problem. For example:

var t = spriteData[currentSound].start;
mySound.currentTime = t;

Answer №2

After much experimentation, I have finally discovered a solution. While the code snippet provided works perfectly fine on its own across various platforms, it somehow fails when integrated into the full production page, particularly on iOS devices (including iOS 6.1):

audioSprite = document.createElement('audio');
audioSprite.setAttribute("src","/foo/bar/file.xxx");

The file extension xxx can be mp4, ogg, wav, or mp3, depending on the browser's compatibility.

Surprisingly, making just a minor alteration to these two lines, while keeping everything else intact, allows the audio to play smoothly on iOS within the production environment:

audioSprite = new Audio('http://example.com/foo/bar/file.xxx');

Despite this successful workaround, the reason behind why the initial version failed remains unclear to me.

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

Deducting time from the present moment

I am facing a scenario where I have 2 strings representing the minute and hour for a specific function to execute at. I aim to validate if the specified minute and hour, present in string format and retrieved from my database, are within a 5-minute window ...

javascriptnode.jsif-statement

Ways to conceal the current state changes from being displayed in the URL

I've implemented a React form with text fields and radio buttons to store data in the state. The 'Proceed' button triggers an onClick function: handleClick(event){ console.log(this.state); var userID = 1; firebase.database().ref ...

javascriptreactjs

ESLint's no-unused-vars rule is triggered when Typescript object destructuring is employed

I'm encountering an issue with my Typescript code where I am destructuring an object to extract a partial object, but it's failing the linter check. Here is the problematic code snippet: async someFunction(username: string): Promise<UserDTO> ...

javascripttypescripteslinttypescript-eslint

Removing an unnamed cookie

A mysterious cookie mysteriously appeared on my website, courtesy of Sharethis (value "sharethis_cookie_test"). This cookie is causing all sorts of session issues for me specifically on Chrome. Despite removing the sharethis plugin from my site, this pesky ...

javascripthtmlgoogle-chromecookiessharethis

Using a custom function, automatically initiate audio playback when an Android WebView JS loads

I have a unique JS function specifically designed for the audio tag, which also controls the progress bar. It works perfectly when I click on the associated tag <a onclick="playSound(1)">. However, if I try to initiate it on page load, the function s ...

javascripthtmlaudio

Is there a feature in JavaScript that allows for the creation of URLs?

I created an index view displaying cards (like playing cards) in a grid using BootStrap. Each card is within its own div element, and I implemented a jQuery click handler for each div to open a details page when clicked. The redirect from the index to the ...

javascriptjqueryhtml

How can I implement a progress bar that mimics an exchange platform behind data-table components? [Using Vue and Vuetify]

I am working on a cryptocurrency exchange book simulator and I am trying to implement a progress bar that will be displayed behind the values in a table. https://i.stack.imgur.com/9gVsY.png This is the template for my data-table: < ...

javascripthtmlcssvue.jsvuetify.js

Validating HTML using EJS templates set as "text/template" elements

What is the general consensus on HTML validation when utilizing a framework such as Backbone or Meteor and generating views in the client from EJS templates? An issue arises with the fact that name is not considered an official attribute for a <script& ...

javascripthtmlvalidationbackbone.jsejs

Simple way to retrieve the first and last date of the current month using Node.js

I need help with retrieving the first and last date of the current month using the code below:- let currentDate = new Date(); let month = currentDate.getMonth() + 1; console.log(month); let firstDate = new Date(currentDate.getFullYear(), currentDate.getMon ...

javascriptnode.jsexpressdatedayofmonth

There seems to be an issue with the accurate calculation of the screen width while utilizing the scrollbar-gutter

Please take note: The scrollbar-gutter: stable; property is not compatible with Safari. Additionally, the issue seems to be specific to Chrome and works fine in Firefox. I have observed some unusual behavior when attempting to position elements fixed to t ...

javascripthtmlcss

Is there a comparable solution like Fabric in Javascript or Node.js?

One thing that I really appreciate about Fabric is how it simplifies the deployment process to multiple servers, especially with its strong support for SSH. But since our project is based on node.js, it would be ideal if we could achieve a similar function ...

javascriptnode.jsdeploymentfabric

After a postback in JavaScript, the Root Path variable becomes null

I have been attempting to save the Root URL in a JavaScript variable within my _Layout.cshtml like this: <script type="text/javascript> var rootpath = ""; $(document).ready(function () { rootpath = "@VirtualPathUtility.ToAbsolute("~/ ...

javascriptasp.net-mvcasp.net-mvc-4

Error: Docker/Next.js cannot locate module '@mui/x-date-pickers/AdapterDateFns' or its respective type definitions

When I run the command npm run build, my Next.js application builds successfully without any issues. However, when I try to build it in my Dockerfile, I encounter the following problem: #0 12.18 Type error: Cannot find module '@mui/x-date-pickers/Ada ...

javascriptdockerdocker-composematerial-ui

Is there a way to implement the focus function and invoke a JavaScript function within an ASP.NET application?

Whenever I click on the textbox, a function is called. The code for that is: onclick="GetColorBack()" However, the GetColorBack function is only called when clicking on the textbox. If I navigate using the TAB key, it does not trigger the function. Is t ...

javascriptasp.net

The type '{ children: Element[]; }' does not include the properties 'location' and 'navigator' that are present in the 'RouterProps' type

Struggling to implement React Router V6 with TypeScript, encountering a type error when including Routes within the `<Router />` component. The error message indicates that the children property passed to the Router is of an incorrect type, despite u ...

javascriptnode.jsreactjstypescriptreact-router-dom

Accessing Jquery's $.get function is currently not possible

I am experiencing difficulty fetching the contents of a json.txt file located in the same directory as this markup. Additionally, there are no errors appearing in Firebug. <!DOCTYPE html> <html> <head> <script type="text/ja ...

javascriptjqueryjson

Making a page jump with Javascript

Welcome! Let's dive into our question. Below you'll find my script and HTML code: My Script: const resultEl = document.querySelector('.allquotes'); const pageSize = document.querySelector('select[name="page-size"]') ...

javascripthtmlpagination

Leveraging Ajax to fetch JQuery

Currently, I am utilizing Ajax to trigger a PHP file for processing upon form submission. The JQuery form validation mechanism evaluates the variables' values to determine whether to proceed with submitting the form or to return false while displaying ...

javascriptphpjqueryhtmlajax

Despite using Vue and Vuex with Axios asynchronously, the getters are still returning an empty array

I am encountering an issue with getters that are returning the initial state (an empty array). In my component, I have a method called created that sets the axios call result into the state. created() {this.$store.dispatch("SET_STORIES");}, I am using m ...

javascriptvue.js

Learn how to swap out the traditional "back to top" button with a customized image and make it slide onto or off the page instead of simply fading in and out

As a newcomer, I am trying to replicate a unique "back to top" effect that caught my eye on another website. Instead of the traditional fade-in approach when scrolling down, the "back to top" image in question elegantly slides out from the bottom right c ...

javascriptjqueryhtmlcss