Audio volume control on mobile

Using JavaScript with Hype
1

Hello !

I want to control the volume of a sound with javascript :

hypeDocument.getElementById(‘bananasound’).volume=.25;

The function works well on desktop, but not on mobile. I also tested some prototypes (audio player, slider…) found on the forum, but the result is the same. Volume control is not working on mobile. Any idea, or other way ?

Thank you !

HYPE sound test.hype.zip (941.2 KB)

2

Based on research I’ve done in the past mobile devices will not let JavaScript code on its own manipulate sound volume - it requires user interaction.

I just visited a web site I did that has javascript control of the sound volume - on neither iOS (10.3.1) nor Android (6.0.1) did the volume fade work.

I understand why this is unfortunately so - but it really limits creativity and practicality. I think a good compromise would be some sort of mechanism that let’s a user grant permission on a site-by-site basis that allows for JavaScript to control media events without user interaction. A permission that could always be revoked.

3

It's dangerous to go alone. Take this.

Annoyed Tomatoes uses Howler.js and it appears to set the volume correctly on mobile. I use LocalStorage to save the user's volume preferences. Sure, the sounds / music don't autoplay, but once the user interacts with the game the correct volume level is used.

4

I use LocalStorage to save the user's volume preferences.

@Photics
Hi Michael!

So how would You go about setting "Preferences" if the web page not a game? Could You do it as in my generic wish for a user to be able to set media preferences on a site by site basis (not just page by page) - i.e. a direct query when the viewer lands on the "Home" page (or whatever).

Also You mentioned "once the user interacts" - how does that work? Can You influence many media resources at a time simply by telling them to load into "local storage" and then You are free to manipulate parameters such as (fading) volume?

What is Howler doing that "regular" JavaScript by itself can't manipulate?

Are my questions even on track? ;->

Thank You!

5

Umm... nothing? :smile:

Theoretically, the whole thing could just be done with pure JavaScript. Howler.js is JavaScript, but it just makes working with audio files a lot easer. (It has a lot of features that Hype should have.) I'm usually against using libraries, such as jQuery, Angular and React, but Howler is really good. I tried using just Hype for the audio, or even adding the JavaScript manually, but I was getting frustrated with all the issues.

Regardless if it's a game or not, you could create a slider for increasing or decreasing the volume on a web page. LocalStorage is per domain. At least, that's what it says here...

...so you'd have to use unique names if you wanted different settings for different pages within the website.

On iOS, it means when the user / player touches the screen.

The sounds themselves aren't saved in LocalStorage... hmm, I wonder if that's possible :thinking: ...it's just saving the values of the audio preferences. It's just a number from 0-10. Here's an example...

// Load Music Volumne
if (localStorage.mv >= 0) {
var mv = localStorage.mv;
} else {
var mv = 7;
}

So, I'm checking if the local storage "mv" has a value. If not, set it to the default value of 7. If a "Music Volume" value was already set, then that's the value to work with for the variable "mv".

var music = new Howl({
 src: ['${resourcesFolderName}/title-screen-dark-feelings.m4a'],
 loop: true,
 volume: (mv/10),
  onfade: function() {
  door.play()
  }
});

music.play();

So, then I use the Howler.js API for loading the sound. The important part for this discussion is the "volume". I store the volume value as a whole number, but it's really a decimal. That's why it's divided by 10.

What is howler doing?

  • One, it's looping the audio seamlessly.
  • Two, it fades the music
  • Three, it has events. It can trigger other sounds. (When the music fades out, open the door.)

Howler has other features too, such as 3D spatial sound and sound sprites.

1 Like
6

Howler has been on my investigate list for awhile - as per your & others’ suggestions - volume control on mobile is a great reason to dive in for a full look.

Thank You for the info! :nerd: