I have an html file with few audio tags. They have id which I can't change and class name. How can I change volume at same time of all these audio elements by one input type="range"
<!-- want to change volume of all above audio -->
<audio id="player_btn_0_0" class="Player" src="1.mp3" type="audio/mpeg"></audio>
<audio id="player_btn_0_1" class="Player" src="2.mp3" type="audio/mpeg"></audio>
<audio id="player_btn_0_2" class="Player" src="3.mp3" type="audio/mpeg"></audio>
<audio id="player_btn_1_0" class="Player" src="4.MP3" type="audio/mpeg"></audio>
<audio id="player_btn_1_1" class="Player" src="5.mp3" type="audio/mpeg"></audio>
<audio id="player_btn_1_2" class="Player" src="6.mp3" type="audio/mpeg"></audio>
<audio id="player_btn_2_0" class="Player" src="7.mp3" type="audio/mpeg"></audio>
<audio id="player_btn_2_1" class="Player" src="8.mp3" type="audio/mpeg"></audio>
<audio id="player_btn_2_2" class="Player" src="9.mp3" type="audio/mpeg"></audio>
<input type="range" name="Volume Changer" id="volume">
<!-- Dont want to change volume in this file -->
<audio id="SUper" class="megaPlayer" src="666.mp3" preload="none" loop="" type="audio/mpeg"></audio>
Ideal solution: if I can use class name to change volume. something like:
$('.Player').volume = $('#volume').value/100;
But it doesn't work.
Here is fiddle: http://jsfiddle.net/zg3dtez5/2/ , I put play/pause function for example how I work with this audio.
Answer by using jQuery:
$('.Player').prop('volume',volume.value/100);
I have written example in your jsfiddle - http://jsfiddle.net/zg3dtez5/1/
var volumeRange = $("#volume");
volumeRange.change(function() {
$("audio").attr("volume", (volumeRange.val() / 100));
});