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>
Related
I need a Mute/Unmute button and an tag that can only mute the sound of a video when clicked.
The mute/unmute button works fine, but the <a tag doesn't do anything
<!DOCTYPE html>
<html>
<body>
<div>
<video src="video.mp4" id="vid"autoplay muted loop></video>
<div class="controller">
<button onclick="muteUnmuteVideo()" type="button">Mute/Unmute sound</button>
Stop Sound
</div>
</div>
<script>
var my = document.getElementById("vid");
const playVideo=() => {
my.play();
}
function muteUnmuteVideo(){
my.muted = !my.muted;
}
let exitvid = document.getElementById("vid");
function stopSound(){
exitvid.muted = false;
}
</script>
</body>
</html>
Why are you using the js code
try to use built in video tag you can get the controllers by default
<video controls muted width="80%" height="50%">
<source src="https://assets.mixkit.co/videos/preview/mixkit-stars-in-space-1610-large.mp4/" type="video/mp4">
</video>
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>
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));
});
I am trying to play a .ogg file which i also converted into a .mp3 file
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<body onclick = "playSound('file:///C:/Users/Rehaan/Downloads/myfirstrecording%20(3).ogg');">
<p id = "sound">
</p>
Click here to play the sound!
</body>
</html>
This is the java script file,
function playSound( url ){
document.getElementById("sound").innerHTML="<embed src='"+url+"' hidden=true autostart=true loop=false>";
}
I would recommend using the HTML5 audio tag.
<audio id="audio_samples" src="mymp3audiofile.mp3" controls></audio>
The audio tag supports mp3, ogg, and wav audio files.
Also, here are Javascript audio control functions that you may find useful:
<script type="text/javascript">
var audio = document.getElementById("audio_samples");
function playAudio() {
audio.play();
}
function pauseAudio() {
audio.pause();
}
function restartAudio() {
audio.load();
audio.play();
}
function louder() {
audio.volume += 0.1;
}
function softer() {
audio.volume -= 0.1;
}
</script>
<button onclick="playAudio()">Play</button>
<button onclick="pauseAudio()">Pause</button>
<button onclick="restartAudio()">Restart</button>
<button onclick="louder()">Louder</button>
<button onclick="softer()">Softer</button>
I hope this helps!
You can use HTML5 Tag which is <audio>. It can play .mp3, .ogg, .wav format.
This is an example that I got from w3schools.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
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.