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));
});
Related
The code bellow loads some audio resources and according to the array sNumbers it plays the files. Each file has the onended event to play the next and so on.
The problem is when it loads the HTML page for the first time, those audios doesn't play at all. It throws the message Uncaught (in promise) DOMException
The second time, when I press F5 on the chrome it works properly.
I tryed autoplay hoping the audio play only after it be loaded.
<!DOCTYPE HTML>
<head>
<title>SENHA</title>
<script src="js1/jquery-3.2.1.min.js"></script>
<audio src="voz/notify.wav" id="somN" preload="auto"></audio>
<audio src="voz/senha.mp3" id="somS" preload="auto"></audio>
<audio src="voz/0.mp3" id="som0" preload="auto"></audio>
<audio src="voz/1.mp3" id="som1" preload="auto"></audio>
<audio src="voz/2.mp3" id="som2" preload="auto"></audio>
<audio src="voz/3.mp3" id="som3" preload="auto"></audio>
<audio src="voz/4.mp3" id="som4" preload="auto"></audio>
<audio src="voz/5.mp3" id="som5" preload="auto"></audio>
<audio src="voz/6.mp3" id="som6" preload="auto"></audio>
<audio src="voz/7.mp3" id="som7" preload="auto"></audio>
<audio src="voz/8.mp3" id="som8" preload="auto"></audio>
<audio src="voz/9.mp3" id="som9" preload="auto"></audio>
<audio src="voz/consultorio.mp3" id="somC" preload="auto"></audio>
<script type="text/javascript">
$(document).ready(function (){
let sNumbers = ['N', 'S', '1', '3'];
let audios = [];
sNumbers.map(function(e, i){
audios.push( document.getElementById("som"+sNumbers[i]) );
});
audios.map(function(e,i){
console.log(e);
if (audios.length-1 != i){
audios[i].onended = function(){
audios[i+1].play();
}
}
});
audios[0].autoplay = true;
}
);
</script>
</head>
<body></body>
</html>
I'm making a javascript code where if you press a button, there's a sound.
HTML piece of code:
<audio id="sound" src="sound.wav"></audio>
...
<input class="button_white" type="button" onClick="document.getElementById('sound').play()"></input>
I noticed that when I press quickly the button, it doesn't play any sound (a sort of lag).
Is there a way to resolve this problem?
<audio controls>
<source src="sound.wav" type="audio/ogg">
</audio>
use built in "control" attribute to play the source file.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio or
Button tag to handle it
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
<audio id="myAudio">
<source src="sound.wav">
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button>
In my page i have an autoplaying piece of audio, however i need to volume to be set to a specific level just incase a user has their volume up at 100%. Any idea on how to do this
HTML Code:
<audio autoplay>
<source src="Media File here">
</audio>
You can use the volume attribute:
<audio autoplay="autoplay" volume="0.5">
<source src="Media File here">
</audio>
values can be from 0.0 (silent) to 1.0 (loudest)
update
It seems like the volume attribute is not well-implemented, so here is a workaround:
audio_tags = document.getElementsByTagName('audio')
for (var i = 0; i < audio_tags.length; i++) {
audio_tags[i].addEventListener("loadstart", function() {
this.volume = this.getAttribute('volume');
}, true);
}
<audio controls="controls" volume="0.1">
<source src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<br /><br />
<audio controls="controls" volume="0.9">
<source src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
I have set up some HTML audio on my site and I have set an autoplay function after a couple of seconds, however the sound seems to be loading twice? one starts playing straight after the other although, one is a ghost and cannot see a player for it.
How could I go about telling javascript not to start playing sounds if there are already sounds playing?
<audio controls="controls" onloadeddata="var audioPlayer = this; setTimeout(function() { audioPlayer.play(); }, 2000)" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
</audio>
The above issue has been solved however I wanted to add a flash fallback for this audio for internet explorer and so added:
<div id ="audio">
<script>var readingMusic = false; </script>
<audio controls="controls" loop="loop" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
<embed type="application/x-shockwave-flash" flashvars="audioUrl=http://www.alanis50.com/Music/music.mp3&autoPlay=true" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best" wmode="transparent"></embed>
</audio>
</div>
<div id="audiohide">
<audio controls="controls" loop="loop" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
<embed type="application/x-shockwave-flash" flashvars="audioUrl=http://www.alanis50.com/Music/music.mp3&autoPlay=true" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best" wmode="transparent"></embed>
</audio>
</div>
But now the flash audio is behaving how the previous audio did obviously the javascript is not affecting the flash embed?
Can't you have a boolean telling the browser if there is already some music playing ?
Example with 2 tags:
<script>var readingMusic = false; </script>
<audio controls="controls" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
</audio>
<audio controls="controls" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
</audio>
Well, that's a part of your jScript.js.
It seems that problem is in this line:
location = base + "/#" + current.replace(base, "");
You navigating to the new url without leaving current page(if origins are the same and the only difference is in hashes). I recommend you to start playing audio after changing location origin.
So you might place your autoplay logick right after this location changes.
I'm playing an MP3 using the <audio> tag in HTML5.
<audio controls="controls" autoplay="autoplay">
<source src="song.mp3" type="audio/mp3" />
</audio>
This works fine, but I am wondering how I can put a delay in before the song starts to autoplay? I know there's not a delay attribute, but I'm thinking it could be accomplished via javascript?
Try this, really simple but you should move the JS outside the markup...
<audio controls="controls" onloadeddata="var audioPlayer = this; setTimeout(function() { audioPlayer.play(); }, 8000)">
<source src="Kalimba.mp3" type="audio/mp3" />
</audio>
Javascript only method:
var sound = document.createElement('audio')
sound.id = 'audio'
sound.controls = 'controls'
sound.src = 'http://a.tumblr.com/tumblr_leltkjNwWL1qf32t9o1.mp3'
sound.type = 'audio/mp3'
document.body.appendChild(sound)
function playAudio() {
document.getElementById('audio').play();
}
setTimeout("playAudio()", 3000);
Try this:
HTML:
<div id='audio'>This will be replaced with an audio tag</div>
jQuery:
$(document).ready(function (){
$("#audio").stop("true").delay('2000').queue(function() {
$(this).html('<audio controls="controls" autoplay="autoplay"><source src="song.mp3" type="audio/mp3" /></audio>');
});
});
All together would be:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<div id='audio'>This will be replaced with an audio tag</div>
<script type='text/javascript'>
$(document).ready(function (){
$("#audio").stop("true").delay('2000').queue(function() {
$(this).html('<audio controls="controls" autoplay="autoplay"><source src="song.mp3" type="audio/mp3" /></audio>');
});
});
</script>
</body>
</html>
You can use .delay() to delay a process in jQuery.
The time is in milliseconds, so 2000 = 2 seconds.