playing audio when a button is clicked in html django template - javascript

i have the following html code snippet:
<audio controls><source src="{{sound.sound.url}}" type="audio/mpeg" id="yourAudioTag">Your browser does not support the audio element.</audio>
<button id="play">Play</button>
<script>
$(document).ready(function() {
var audioElement = document.getElementById('#yourAudioTag');
$('#play').click(function() {
audioElement.play();
});
});
</script>
but it doesn't seem to play the audio when i click on the button PLAY.
how can i do it?

You are never taking the audio file and assigning it to the variable. In your case audioElement.play(); is playing nothing because it is not linked to anything.
My approach is a little bit different than yours. I decided to put the audio file in the JavaScript directly. You can check it bellow:
Pure JavaScript:
function Play_Audio(){
var audioElement = document.createElement("audio");
audioElement.src = "https://raw.githubusercontent.com/Metastruct/garrysmod-chatsounds/master/sound/chatsounds/autoadd/snoop_dogg/hold%20up%20wait.ogg";
document.getElementById("Play_Button").addEventListener("click", function(music){
audioElement.play();
}, false);
}
Play_Audio();
<button id="Play_Button">Play</button>
jQuery:
$(document).ready(function(){
var audioElement = document.createElement("audio");
audioElement.src = "https://raw.githubusercontent.com/Metastruct/garrysmod-chatsounds/master/sound/chatsounds/autoadd/snoop_dogg/hold%20up%20wait.ogg";
$('#Play_Button').click(function(){
audioElement.play();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Play_Button">Play</button>
Taking the sound from an audio tag:
document.getElementById("Play").addEventListener("click", function(music){
var audioElement = document.getElementById("Audio");
audioElement.play();
}, false);
<audio id="Audio" controls>
<source src="https://raw.githubusercontent.com/Metastruct/garrysmod-chatsounds/master/sound/chatsounds/autoadd/snoop_dogg/hold%20up%20wait.ogg" type="audio/ogg">
</audio>
<div id="Play">Play Button</div>
PS: It took me more time to find an appropriate audio than to write the snippet.... I think, I have issues!

Related

Why doesn't my JS function work with my button?

Trying to make my own play button
Audio loads and plays fine with the HTML Audio Tag
Error console says "Fails to load resource https://open.scdn.co/static/embed.2019-03-05_152e14cd.js.map"
song.play(); typed into JS console works fine
Button does not activate function!
HTML
<audio id="song" controls> <source src="song.mp3"></source>
</audio>
<button class="controls" id="play">Play</button>
JavaScript
var play = document.getElementById("song");
song.addEventListener ("click", buttonActions);
function buttonActions(event){
song.play();
}
You're attaching the event handler to the <audio> element, instead of the <button> element.
Instead of:
var play = document.getElementById("song");
song.addEventListener ("click", buttonActions);
function buttonActions(event){
song.play();
}
It should be:
var play = document.getElementById("play");
play.addEventListener ("click", buttonActions);
function buttonActions(event){
var song = document.getElementById("song");
song.play();
}

How to detect end of audio file when created dynamically?

I've created an audio object using jQuery, like so
var player;
$(document).ready(function() {
player = new Audio();
player.id = "player";
player.volume = 0.5;
});
I'm able to play, pause,... succesfully
player.src = file;
player.play();
This is when i run into trouble. I'm trying to detect when the player stops playing, but it's not working...
I've tried the following with no success:
$(document).on("ended", "#player", function(e) {
alert('stop');
});
$("#player").bind("ended", function() {
alert('stop');
});
$("#player").on("ended", function(e) {
alert('stop');
});
How can i tell when the player has stopped using jQUERY?
Why not use html5 audio element with pure js?
W3Schools
var aud = document.getElementById("myAudio");
aud.onended = function() {
alert("The audio has ended");
};
You are so close but should use addEventListener for ended event
$(document).ready(function() {
player = new Audio();
player.volume = 0.5;
var playerID = document.getElementById('player');
playerID.addEventListener("ended", function(e){
alert('ended');
}, false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio controls id="player">
<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Audio credit by w3schools

Playing Audio Using Jquery

I have a small jQuery function to play audio when a user clicks the link. I don't need any controls, they are short samples. I just want to play anytime a user clicks. Here is the html for the section that should play;
</div class="classicalRecordings">
Open song
</div>
Then this is the jQuery to play the sound;
function playMusic(){
var audioElement = document.createElement('audio');
var audioElementSrc = $(this).attr('data-audio-src');
audioElement.setAttribute('src', audioElementSrc);
$.get();
audioElement.addEventListener("load", function(){
audioElement.play();
}, true);
}
$(function(){
$('.play').click(playMusic);
});
It doesn't seem to work. I think it has to do with the src variable, I am not sure I am passing it to the audioElement correctly. I have tested using an alert to be sure I am grabbing the data-audio-src correctly. Any help is appreciated.
I think that the event you're looking for is the loadeddata event.
function playMusic(){
var audioElement = document.createElement('audio');
var audioElementSrc = $(this).attr('data-audio-src');
audioElement.setAttribute('src', audioElementSrc);
$.get();
// changed "load" t0 "loadeddata"
audioElement.addEventListener("loadeddata", function(){
audioElement.play();
}, true);
}
$(function(){
$('.play').click(playMusic);
});
Although you could probably be better off having a static audio element and changing the src attribute on user clicks rather than creating a new audio element.
// example
var audio = document.getElementsByTagName('audio')[0];
audio.addEventListener('loadeddata', function() {
this.play();
}, true);
function playMusic() {
var audioElementSrc = $(this).attr('data-audio-src');
audio.setAttribute('src', audioElementSrc);
};
$('.play').click(playMusic);
There is a framework for this that is worth checking out. ListenJS. I wrote it :)
Try something like this:
<audio id="sound">
<source src="music/classical/open.mp3" type="audio/mpeg">
</audio>
And from code:
$(function(){
$('#sound').get(0).play();
});

playing audio when button clicked and then stops and new audio plays when different button clicked

When a user clicks on a buttone it plays audio, but when they click on another button that audio stops and it then plays audio for that button and so forth. at the moment when the page loads i also have background music which autoplays, I am trying to figure out how to stop the music playing when a new button is pressed and then that music plays as currently they overlap. Any help would be greatly appreciated.
on load background music code:
<audio autoplay="autoplay" class="bondAudio">
<source src="audio/Bond.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
button clicked audio plays code:
<script>
$(document).ready(function() {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'audio/Dr-No.mp3');
audioElement.setAttribute('play', 'play');
//audioElement.load()
$.get();
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
$('#blockLink1').click(function() {
audioElement.play();
});
});
</script>
Why are you creating elements using pure js when you have jQuery?
<script>
$(document).ready(function() {
var audioElement = $('<audio></audio>');
audioElement.attr('src', 'audio/Dr-No.mp3');
audioElement.attr('play', 'play');
//audioElement.load()
$.get(); // ?
audioElement.on("load", function() {
audioElement.get(0).play();
}, true);
$('#blockLink1').click(function() {
$('audio').each(function() {
this.stop();
});
audioElement.get(0).play();
});
});
</script>

want to play audio and it should be stop after 10 seconds inHtml and javascript?

I am new in Html5 and javascript I want to play audio clip when i open html page and it should be stop after 10 seconds and display message that Audio play successfully.
for simple audio play in html5 as below
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="kill_bill.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
setInterval(function(), 10000);
$.each($('audio'), function () { this.stop(); alert('Audio Stop Successfully'); });
</script>
</body>
</html>
A setTimeout seems more appropriate :
var audio = document.createElement("audio");
audio.src = "sound.mp3";
audio.addEventListener("canplaythrough", function () {
setTimeout(function(){
audio.pause();
alert("Audio Stop Successfully");
},
10000);
}, false);
Example
Put timer/counter on load of JS as it come to 10 seconds call the below function.
Timer
setInterval(Call Below Function, 10000)
Stop Audio
$.each($('audio'), function () {
this.stop();
alert('Audio Stop Successfully');
});
TRY THIS ::::
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TIMER</title>
</head>
<body>
<audio id="aud" controls autoplay>
<source src="test.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script type="text/javascript">
var myaud = document.getElementById("aud");
var k = setInterval("pauseAud()", 10000);
function playAud() {
myaud.play();
}
function pauseAud() {
myaud.pause();
alert('Audio Stop Successfully');
clearInterval(k);
}
</script>
</body>
</html>
First of all, pay attention: automatic play won't work under iOS; as Apple prevents it to be possible.
As for stopping audio, I always suggest to use mediaelement library, which supports non HTML5 browsers and has a complete interface to start/stop audio playback.
<audio id="audio_killbill" muted controls onload="audiofor_10sec()">
<source src="kill_bill.mp3.mp3"></source> <!-- Webkit Browser -->
<source src="kill_bill.mp3.ogg"></source> <!-- Mozilla/Firefox -->
Your browser isn't invited for super fun <code>audio</code> time.
</audio>
Vanilla JS
function audiofor_10sec(){
let audio = getElementById('audio_killbill');
audio.muted = false; // New browser rule doesn't lets audio play automatically
audio.play();
setTimeout(() => {
audio.pause();
audio.currentTime = 0; // Works as audio stop
}, 10000);
}

Categories