Issue with caching mp3 audio files on iOS mobile devices (including both mobile Chrome and Safari browsers)

Struggling to autoplay previously cached mp3 audio on mobile iOS devices (Safari and Chrome)

In my development of an Angular 8 app, I encountered an issue where I am attempting to cache a few incoming audio mp3 files in an array of objects. The goal is to autoplay or play these audio files based on user actions. Surprisingly, this feature works flawlessly on desktop and Android platforms but fails on mobile iOS devices at times.

Essentially, I iterate through an array of objects retrieved from an API and cache the mp3 files using a forEach loop:

items.forEach(item => {
       const audio = new Audio();
       audio.src = urlString;
}

However, when caching is disabled and the API is called each time to play the sound, everything functions correctly on mobile iOS devices.

Does anyone have any suggestions on how to resolve this issue?

Implementing mobile iOS audio caching

Answer №1

It appears that the issue may be related to a recent update on iOS, as outlined in this article:

I encountered a similar problem where audio files were only partially loading and caching intermittently despite user interaction. To address this, I created a function triggered by the initial button press (e.g., start/log in) to pre-cache all potential audio files used within the application.

After implementing this workaround, autoplay functionality on iOS worked smoothly. While it was a temporary solution, it effectively resolved the issue at hand.

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

An identical copy of a picture collection designed to showcase photographs

I currently have a photo gallery script embedded in my website: <script async src="//jsfiddle.net/karimabdlehamee/tmLswek3/3/embed/js,html,css,result/dark/"></script> While it works perfectly on my site, I encountered issues when try ...

What is the process for storing various counter values in React using localStorage?

I'm currently working on a burger builder. Here is the list of ingredients. My main goal is to save the counter values when navigating between tabs (using react-router). return ( <div className="ingredients"> <div className=&q ...

Programmatically searching individual columns in Datatables is a powerful feature that

I am currently working on creating a jQuery datatable with search functionality in each column, using the example provided on the datatables page found at https://datatables.net/examples/api/multi_filter.html Specifically, I want to be able to search the ...

What is the process for adjusting the scale value in pixels?

Is there a way to adjust the object's scale based on pixel value using three.js? object.scale.set(0.05,0.05,0.05); I am aiming to set the size at 0.05 pixels. ...

Saving csv data from an XMLHTTPRequest into an Array using Javascript

Attempting to extract data from a csv file, I utilized the following code snippet: (The csv file contains multiple lines representing different rows in a table) var newArray = [] function init() { var xhttp = new XMLHttpRequest(); xhttp.onreadyst ...

looking to showcase the highest 'levelNumber' of elements within an array

arr1 = [ { "levelNumber": "2", "name": "abc", }, { "levelNumber": "3", "name": "abc" }, { "levelNumber": "3", "name": &quo ...

VueJs Axios - Managing Request Headers

Edit: Is it possible that this is a CORS issue, considering I am on localhost... When using Javascript, I have the ability to define request headers and handle responses like this: $(function() { var params = { // Request parameters } ...

Changing JSON information into a Javascript Array utilizing knockout

I have a JSON Array that includes various rules and values, but I want to convert it into a specific array format. Here is an example of the original JSON Array: AccessToFinancialServicesRule: {Clean: 3, Copy: 3} BoardParticipationRule: {Clean: 3, Copy: 3} ...

Troubleshooting intersecting objects in THREE.js

Having trouble detecting intersections of extruded objects in THREE.js. The objects are created from a 2D geometry as shown below: var geoShape = new THREE.Shape(vertexes); var geometry = new THREE.ExtrudeGeometry(geoShape, { bevelEnabled: false, amount: ...

Having trouble locating images and JavaScript files on GitHub Pages

Using a template from this source to create a react website with interactions involving smart contracts, I successfully got everything up and running smoothly on my localhost. All the features of the site were functioning correctly and images were displayi ...

Object.entries does not exist

Recently, I have noticed a surge in errors related to the following message: Object.entries is not a function This particular piece of code is utilized in various sections of Vue components. Furthermore, there is a file named .browserslistrc: defaults ...

The JSX component cannot use 'Router' as a valid element

Error Message The error message states that 'Router' cannot be used as a JSX component because its return type 'void' is not a valid JSX element. TS2786 import App from './App'; 5 | > 6 | ReactDOM.render(<Router ...

Removing a single object from an array of objects using MongooseJS

Hello to all the MongooseJS experts out there! I'm a newcomer to MongooseJS, and I've been trying to solve this problem for the past two days but haven't found a solution yet. Thank you in advance for any help! The Issue with My Delete me ...

Modifying JSON data within an Express Node.js server

As someone who is relatively new to the world of node.js and web development, I am eager to learn more. If you have any valuable resources or materials for me to explore, please share them. Currently, my focus is on prototyping the exchange of a JSON obje ...

Can I use Javascript to make changes to data stored in my SQL database?

I am delving into the realm of SQL and Javascript, aiming to insert my variable ("Val_Points from javascript") into a table ("Usuarios") associated with a specific user (e.g., Robert). Is it possible to achieve this using JavaScript, or are there alternati ...

What is the process for designing bootstrap labels similar to this style?

https://i.sstatic.net/A0nUt.png I am looking to create an input design that changes based on the user's action. When the label is clicked, a violet line should appear. If the input is successful, a green line appears below the label. And for errors, ...

Is there a way to bypass the default layout on app router in Next.js and implement our own custom page layout

Utilizing a default layout in layout.jsx, I passed all my other pages as children through props. In the page router, we typically configure the router path to specify which layout to use. However, in this new system, I am facing challenges with coding it. ...

How to arrange different components of an array in JavaScript

Seeking a proficient approach to the issue at hand: https://i.sstatic.net/JP8aE.png In essence, the goal is to prioritize items with a pending status at the top and arrange all other statuses below, then sort each section alphabetically by name. Here is ...

Integrating a YouTube video in the Google Maps info window with the help of Ajax technology

Currently working on a project for Udacity, my goal is to develop a neighborhood map using Google Maps API alongside Knockout and Ajax to integrate with another 3rd party API. A unique aspect of my approach is focusing on bars in the neighborhood and utili ...

What is the best way to expand the subcategories within a list?

I have successfully implemented a script to open my hamburger menu. However, I am facing an issue with subitems as some list items contain them. How can I modify the script to ensure that the subitems expand when clicked instead of just hovering? functi ...