javascript – multiple custom audio dials-ThrowExceptions

Exception or error:

I’ve created a custom audio dial which autoplays the audio at zero volume, and then allows the user to increase the volume using the slider if they wish. I’ve got this to work on the first audio file however i would like to achieve this for multiple audio files at once.

For example the user should be able to use multiple audio dials to select different sounds and create an unique audio mix. The only way i can think of to do this would be to create multiple separate Javascript functions and then keep amending the “volume1” in the input tags, to “volume2” and so on. However i can help thinking this would be alot of duplication.

var audio_file_1;
var volume1;

    function init()  {
    audio_file_1 = document.getElementById("cs_audio");
     volume1 = document.getElementById("volume1");
     audio_file_1.play();
    }

    function setVolume() {
    var audio_file_1  = document.getElementById("cs_audio");
    audio_file_1.volume = document.getElementById("volume1").value;

    }


    function play() {
    var audio = document.getElementById("cs_audio");
    audio.play();
    }
<ul>        
    <li>
        <h2>Crackling fire</h2>
        <input type="range" oninput="setVolume(this)" id='volume1' min=0 max=1 step=0.01 value='0' onclick="play()">
        <audio loop id="cs_audio" controls style="display:none">
        <source src="audio/cracklingfire.wav" type="audio/WAV">
        </audio>

    </li>

    <li>
        <h2Wind</h2>
        <input type="range" oninput="setVolume()" id='volume1' min=0 max=1 step=0.01 value='0' onclick="play()">
        <audio loop id="cs_audio" controls style="display:none" >
        <source src="audio/wind.wav" type="audio/WAV">
        </audio>

    </li>

    <li>
        <h2>Rain</h2>
        <input type="range" oninput="setVolume()" id='volume1' min=0 max=1 step=0.01 value='0' onclick="play()">
        <audio loop id="cs_audio" controls style="display:none" style="display:none">
        <source src="audio/rain.wav" type="audio/WAV">
        </audio>
    </li>
How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *