Question 214478 in Html Question posted in
Some basic documentation can be found here.

Html – Javascript .volume property doesn't work with float numbers

I made some scripts to understand the javascript Audio, and have a problem about .volume.
Setting the value to 0 does the work, but any float numbers like 0.3 is not taken into consideration.

Here is a little player with play/pause and a looping randomized list. The comments are the 2 tests about volume.
The first one is applied on the first music played. The second one when a new music starts.
In the 2 cases, .volume = 0 works fine (it mutes the song) but any numbers like 0.2, 0.5 etc… doesn’t put the sound down.

HTML

<div id="music" >MUSIC</div>
<style>
    #music {
        display: flex;
        justify-content: center;
        width: 80px;
        margin-left: 50px; margin-top: 50px; 
        padding: 10px;
        background: blue;
    }
</style>
<script src="audio.js"></script>

JAVASCRIPT

class Music {
    constructor() {
        this.play();
    }
    playList = [new Audio('triangle.wav'), new Audio('drum.wav'), new Audio('guitar.mp3')];
    /* same randomized list at each repetition */
    shuffle(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            const temp = array[i];
            array[i] = array[j];
            array[j] = temp;
          }
          return array;
    }
    playListFinal = this.shuffle(this.playList);
    play() {
        let playStatus = 'off';
        let currentMusic = 1;
        document.getElementById('music').addEventListener("click", e => {
            switch(true) {
                case (playStatus == 'off') : {
                    playStatus = 'on';

                    /* 1st volume test, on 1st music played */

                    var test = this.playListFinal[currentMusic-1]
                    test.volume = 0.2;
                    test.play();
                    break;
                }
                case (playStatus == 'on') : {
                    playStatus = 'off';
                    this.playListFinal[currentMusic-1].pause();
                    break;
                }
            }
        })
        this.playListFinal.forEach( music => music.addEventListener("ended", event => {
            if (currentMusic == this.playListFinal.length) {
                currentMusic = 1;
            }
            else {
                currentMusic ++;
            }

            /* 2nd volume test, when a new music starts */

            this.playListFinal[currentMusic-1].volume = 0.2;
            this.playListFinal[currentMusic-1].play();
        }));
    }
}
const music = new Music;
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    To answer my problem, after further testing, it appears that the volume works fine on my phone, but not on PC. I suspect my realtek audio driver to force the sounds to max volume, it's why I have an effect only at really low values like 0.07, but in this case the sound become inconsistant (it diseapers after few clicks).


  2. 0

    From the provided code, I see no problem amid the way you’re handling the audio volume property, which indeed should accept a float number between 0.0 (silence) and 1.0 (full volume) .

    However, there are a few things you can do to debug the issue:

    1. Check the Browser Compatibility: It’s possible that the problem lies within the browser you are testing your script on. Different browsers might handle audio playback in different ways. Make sure you test your script across several different browsers to see if the issue persists.

    2. Check Your Audio Files: Make sure that the audio files are functioning as expected. Try playing them inside an audio player to ensure they are not corrupted and have no issues with the volume levels.

    3. Print Debugging Information: To see what’s happening under the hood, you can console log the volume before and after you set it:

    console.log("Volume before setting:", test.volume);
test.volume = 0.2;
console.log("Volume after setting:", test.volume);

    1. Checking Other Properties: Make sure that you’re able to manipulate other properties of the audio object (like playbackRate, for instance) to see if the issue is confined to the volume property or not.

    2. Check for Errors: Check your browser console for any errors that might be occurring. These could provide valuable insight into what’s going wrong.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search