Play sounds quickly - javascript

Play sounds quickly - javascript

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>

Related

How to extract duration of a video from a link

I am displaying a video on my website like this:
<video>
<source src={link} type="video/mp4" />
</video>
And I would like to extract duration of the video from the provided src link, to display it somewhere else on the page. Assume we have the link stored as a string, how will I extract the duration of the video?
Sample src link: https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d

to get the duration of the video you have to wait for it to load using the event listener and that way you are sure you have the data, this is a link you can use to help you learn more about the API, here.
let video = document.getElementById("video")
video.addEventListener('loadeddata', function() {
console.log("test", video.duration)
// Video is loaded and can be played
}, false);
function myFunction() {
alert(video.duration);
}
myFunction
<html>
<h1>video duration</h1>
<button onclick="myFunction()" type="button">Get video length</button><br>
<video id="video">
<source src="https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d" type="video/mp4" />
</video></html>

The video tag has a "duration" property, which will tell you the length of a video.
https://www.w3schools.com/tags/av_prop_duration.asp
<html>
<body>
<button onclick="myFunction()" type="button">Get video length</button><br>
<video id="myVideo" width="320" height="176" controls>
<source src="https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d" type="video/mp4">
</video>
<script>
function myFunction() {
let vid = document.getElementById("myVideo");
alert(vid.duration);
}
</script>
</body>
</html>

Play a sequence of MP3 in Javascript on chrome

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>

How to play sound through HTML buttons

My current method of playing music through my website is by the HTML audio tags. However I want to be able to play it through HTML button instead. This button should be able to toggle the music between playing and stopping. I've created an example on JSFiddle but don't know how to implement it. Could someone please show me how to do it using my JSFiddle example?
JSFiddle: http://jsfiddle.net/jTh3v/332/
Original way I done it:
document.getElementById("soundTag").innerHTML = "<audio controls volume preload='none' src='http://www.sousound.com/music/healing/healing_01.mp3'></audio>";

you can play sound by onclick event...insert a button on html.write a function and call it at your button as onclick event.
function playMusic(){
var music = new Audio('musicfile.mp3');
music.play();
}
<input type="button" value="sound" onclick="playMusic()" />
Make sure to give a valid filename.

This will work:
document.getElementById("soundTag").innerHTML = "<audio controls volume preload='none' src='http://www.sousound.com/music/healing/healing_01.mp3'></audio>";
$('#button_play').on('click', function() {
//I added this
$("audio")[0].play();
$('#button_pause').show();
$('#button_play').hide();
});
$('#button_pause').on('click', function() {
//I added this
$("audio")[0].pause();
$('#button_play').show();
$('#button_pause').hide();
});
.second {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Instead of doing the audio tag method, I want to do it through the buttons. However I don't know how to do this.</p><br>
<p>HTML Audio tag method (the method I don't want):</p>
<div id="soundTag"></div><br>
<p>Button method (the method I want, but doesn't work):</p>
<div>
<button id="button_play" class="first" type="button">
<i class="glyphicon glyphicon-volume-up"></i></button>
<button id="button_pause" class="second" type="button">
<i class="glyphicon glyphicon-volume-off"></i></button>
</div>

This worked. Delete my mp3 file and upload your own mp3 file.
<button id="ASong" onClick="playPause()">
<audio
src="file_example_MP3_700KB.mp3"
autoplay
loop
></audio>
Song
</button>
<script>
var aud = document.getElementById("ASong").children[0];
var isPlaying = false;
aud.pause();
function playPause() {
if (isPlaying) {
aud.pause();
} else {
aud.play();
}
isPlaying = !isPlaying;
}
</script>

try it like this
$('#button_play').on('click', function() {
$('#button_pause').show();
$('#button_play').hide();
$('audio')[0].play();
});
$('#button_pause').on('click', function() {
$('#button_play').show();
$('#button_pause').hide();
$('audio')[0].pause();
});
The idea here is to take the audio element from the array that returns and use the methods for the HTML5 tag. All the methods you can find from here

Play and pause buttons.
Info and code comes from https://www.w3schools.com/jsref/met_audio_play.asp
I put it on this http://jsfiddle.net/654qasw0/ (changing sound sources)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio">
<source src="https://upload.wikimedia.org/wikipedia/commons/1/11/H_is_for_horse.ogg" type="audio/ogg">
<source src="http://www.u86news.com/Music/Sounds/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</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>
<script>
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</script>
</body>
</html>

Try this:
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio">
<source src="https://upload.wikimedia.org/wikipedia/commons/1/11/H_is_for_horse.ogg" type="audio/ogg">
<source src="http://www.u86news.com/Music/Sounds/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</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>
<script>
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</script>
</body>
</html>
or:
<button id="ASong" onClick="playPause()">
<audio
src="file_example_MP3_700KB.mp3"
autoplay
loop
></audio>
Song
</button>
<script>
var aud = document.getElementById("ASong").children[0];
var isPlaying = false;
aud.pause();
function playPause() {
if (isPlaying) {
aud.pause();
} else {
aud.play();
}
isPlaying = !isPlaying;
}
</script>
if they don't work just try this:
$('#button_play').on('click', function() {
$('#button_pause').show();
$('#button_play').hide();
$('audio')[0].play();
});
$('#button_pause').on('click', function() {
$('#button_play').show();
$('#button_pause').hide();
$('audio')[0].pause();
});

I can not used javascript to control audio in chrome

When I click the button "play" or "pause", it does not work in Chrome:
<script>
var audioPlayer = document.getElementsByName("player_audio");
function play(){
audioPlayer.play();
}
function pause(){
audioPlayer.pause();
}
</script>
HTML:
<audio id="player_audio" controls>
<source id="audio_sources" src="http://admin.test.cnrmobile.com/18/1463652002.aac">
<p>
<button onclick="play()"> play </button>
</p>
<p>
<button onclick="pause()"> pause </button>
</p>

<!DOCTYPE html>
<html>
<body>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button><br>
<audio id="myAudio" width="320" height="176">
<source src="http://admin.test.cnrmobile.com/18/1463652002.aac" type="audio/ogg">
Your browser does not support HTML5 audio.
</audio>
<script>
var aud = document.getElementById("myAudio");
function playAudio() {
aud.play();
}
function pauseAudio() {
aud.pause();
}
</script>
</body>
</html>
https://jsfiddle.net/0fjgxosu/
Your example with document.getElementById instead works just fine too:
<script>
var audioPlayer = document.getElementById("player_audio");
function play(){
audioPlayer.play();
}
function pause(){
audioPlayer.pause();
}
</script>
https://jsfiddle.net/0fjgxosu/1/

HTML 5 video player external control

I'm using html5 video player to play some videos and trying to use external controls with javascript. manage to get the player play and pause. but i cannot get it to mute and unmute using the buttons. if someone can help with this matter its highly appropriated.
Here is the HTML code
<video id="myMovie" width="600" height="600" loop preload="auto" video poster="img.jpg" controls>
<source src="my-video-file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="playButton">Play</button>
<button id="volButton">Mute</button>
JavaScript Code
function playMymovie() {
var element = document.getElementById('myMovie');
var element = document.getElementById('pbutton');
playButton.addEventListener('click', PlayOrPause, false);
volButton.addEventListener('click', VolMute, false);
}
function PlayOrPause() {
if(!myMovie.paused && !myMovie.ended) {
myMovie.pause();
}else{
myMovie.play()
}
}
function VolMute(){
if(!myMovie.muted){
myMovie.muted(true);
}else{
myMovie.muted(false);
}
}
Thanks in advance.

<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="muteUnMute()">Mute/UnMute</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function muteUnMute()
{
if( !myVideo.muted)
myVideo.muted='muted';
else
myVideo.muted=false;
}
</script>
</body>
</html>

Try this:
var videoObject = document.getElementById('myMovie');
videoObject.muted = !videoObject.muted;

Develop Reference

JavaScript is the programming language of the Web.

Play sounds quickly - javascript

Related

How to extract duration of a video from a link

Play a sequence of MP3 in Javascript on chrome

How to play sound through HTML buttons

I can not used javascript to control audio in chrome

HTML 5 video player external control

Categories

Resources