The volume control does not work on Howler.js for iOS devices

In my Meteor React App, I have made some modifications to the React Howler plugin in order to play two audio tracks simultaneously. I have also added a crossfader feature to adjust the volume of both tracks at the same time. This functionality works perfectly in Chrome and on Android devices. However, upon testing it on iOS, I noticed that although the audio plays without any issues, the volume adjustment does not take effect.

An interesting observation is that when I check the volume values at each time interval (the player updates 10 times per second), the values displayed are correct across all platforms. This indicates that the volume is indeed being set and stored correctly on iOS, but the actual audible volume remains unchanged.

Below is a snippet of the volume control functions in my customized version of ReactHowler:

get volume() {
    return this._howler.volume();
}

set volume(val) {
    if(this._howler.volume() !== val){
        console.log("setting volume to " + val)
    }
    this._howler.volume(val);
}

The console output appears as expected, showing the volume being set to the desired value when the crossfader is adjusted:

setting volume to 0.35
howler volume: 0.35 (this is output at every time frame for debugging purposes)
howler volume: 0.35
...

Answer №1

I found the answer to the question in the GitHub issue that I raised. You can check it out [here].(https://github.com/goldfire/howler.js/issues/805)

The issue arises when using html5 audio on iOS, but disabling it resolves the issue.

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

How do I utilize ng-repeat in Angular to pass a variable that specifies the number of repetitions?

When working on my app, I encountered a situation where I needed to retrieve elements from a database and display them using ng-reat. Everything was going smoothly until I realized that within this list, there was another set of data that required a separa ...

While iterating through the material-ui rating component, the 'index' value remains constant at 0 within the 'onChange' function

For my e-commerce React.js web app, I want to show the rating value of each product. Using the JS map function, I was able to track which product was hovered by its index ('onChangeActive' is the handler for this). {products.map((product, index) ...

Using Angular and Jasmine: techniques for simulating a service that provides a promise

In my AngularJS application, I have a controller called MenuCtrl that utilizes a service provided by "$mdSidenav" from Angular Material. This service is created using a factory method. angular.module('leopDirective', []) .controller('Me ...

Updating a Parent component from a Child component in React (Functional Components)

My functional component RoomManagement initiates the fetchRooms function on the first render, setting state variables with data from a database. I then pass setLoading and fetchRooms to a child component called RoomManagementModal. The issue arises when t ...

Upon triggering a GET request to the URL "http://localhost:3000/search", a "404 (Not Found)" error response was received. Interestingly

Can Someone assist me please? I'm having trouble creating a website similar to YouTube and encountering the following error: GET http://localhost:3000/search 404 (Not Found) Uncaught (in promise) Error: Request failed with status code 404 at createEr ...

When the if statement fails to halt the code from running

After diving into the world of coding just one or two weeks ago, I decided to create a feature where users can press a key to start playing. No matter what I try, I always end up with the same outcome. Here's my approach: I have an if statement that ...

implementing a SetTimeOut function following the clicking of a button

Hey there, I've been working on a code snippet that switches the display state from block to none with an onClick function. However, I'm looking to add a delay before the state change happens so that there's time for an animation effect to ...

The Javascript modification of an ASP.NET TextBox goes unnoticed

For someone skilled in this area, this task should be a breeze. I have three components: a launch calendar button, a continue button, and a date textbox. When the button is clicked, a JavaScript calendar pops up in a new window. This calendar sets a date ...

The functionality of nested routing is not operating properly in react-router

I'm currently struggling to get my CollectionPage to render and match the URL correctly within my nested Route in React. Unfortunately, it doesn't seem to be working as expected! Here's a piece of code from my shop.component file that is be ...

What is the best way to position a div to float or hover from the bottom after it has been

I am working on creating a menu where clicking it will reveal a submenu at the bottom, but I'm encountering an issue. Currently, in my code, the submenu is appearing from right to left before moving down. Here is my code: <meta name="viewport" co ...

The Challenge of Refreshing Static Site Generation in NextJS Version 13

I've encountered a problem with updating data on a basic data page. The situation is simple: there's a page that shows category data and another page that allows editing of the same data. After making edits and returning to the list page, I expec ...

Displaying information in ejs format

I am currently working on a project to develop a basic webpage that requires the user to input a specific time and then click on submit. Once submitted, I want the relevant data linked to that input to be displayed on the webpage. Upon clicking the submit ...

The npm request was unsuccessful due to a self-signed certificate within the certificate chain causing the failure

I am attempting to launch a React Native project using Expo from this site npm install expo -g expo init AwesomeProject npm start However, when running npm start, I encounter the following error: npm ERR! code SELF_SIGNED_CERT_IN_CHAIN npm ERR! er ...

Unable to iterate through Ajax calls using For Loop when onChange event occurs

I'm struggling with looping the OnChange method using an AJAX call, but for some reason, it's not working as expected. for (let index = 0; index < 300; index++) { $('#txtLini'+[index]).on('change', function() { ...

What is the best way to obtain a list of all the modules that are currently accessible in AngularJS

When declaring an Angular module, I specify its dependencies as follows: const myModule = angular.module("MyModuleName", ["Dep1", "Dep2", "Dep3"]); Each dependency comes with its own set of dependencies, directives, controllers, etc. Is there a way to qu ...

How can I resolve the issue of encountering the "Modal dialog present: If you navigate away from this page, any unsaved changes will be lost" message while using Internet Explorer with

Here's the code snippet I'm working with. While it successfully removes the alert box, it throws an error in the console: Exception in thread "main" org.openqa.selenium.UnhandledAlertException: Modal dialog present: If you leave this page, any c ...

Multiple occurrences of the cookie found in the document.cookie

My client is using IE9 and the server is asp.net (specifically a SharePoint application page). Within the Page_Load method of a page, I implemented the following code: Response.Cookies["XXXXX"].Value = tabtitles.IndexOf(Request.Params["tab"]).ToString(); ...

Vuejs may encounter challenges with v-model when numerous items are present on the page

My simple page consists of a form at the top for submitting data and a list below that, as shown in the image: https://i.sstatic.net/3WjY2.png The list is populated with data from an api, each object having only 4 properties. Currently, there are a total ...

Searching for attributes in a JSON document

Currently, I am dealing with a results API that provides me with a JSON file. My goal is to search for a specific property within this file. To achieve this, I first push the JSON data into an empty array and then iterate over it to retrieve the first obje ...

An error occurs when attempting to redirect with getServerSideProps

When I am logged in, I want to redirect to the /chat page using auth0 for authentication. The error seems to be related to returning an empty string for props, but it does not impact the website as redirection works correctly. The main issue here is the in ...