How to detect end of audio file when created dynamically? - javascript

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

Related

Set the current time for an audio object when a page loads

How do I set the current time for an audio object when a html page loads? This is what I am currently doing:
var a = document.getElementById("myAudio");
a.addEventListener("timeupdate", function() {
console.log(this.currentTime);
// do other stuff like display the current time
}
var isCurrentTimeSetOnStartup = false;
a.addEventListener("canplay", function() {
if (isCurrentTimeSetOnStartup == false){
this.currentTime = startTime;
isCurrentTimeSetOnStartup = true;
}
});
which I think is ugly. If I don't have the isCurrentTimeSetOnStartup guard then the two events trigger each other.
You can place your script at the bottom of the <body> tag and then use the following code to set the currentTime of your Audio Source.
let a = document.querySelector('#myAudio');
let startTime = 2;
a.addEventListener('canplay', function handler() {
// Time in seconds
this.currentTime = startTime;
// Remove the event listener
this.removeEventListener('canplay', handler);
});
a.addEventListener('timeupdate', function() {
//Time in seconds
console.log(this.currentTime);
});
// Play on DOM-Load
a.play();
<!--http://picosong.com/wwPMj/-->
<audio id="myAudio" controls>
<source src="https://www.computerhope.com/jargon/m/example.mp3" type="audio/mpeg">
Your browser does not support HTML5 video.
</audio>

playing audio when a button is clicked in html django template

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!

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();
});

how to change vimeo video source to local mp4 video using javascript

I'm trying to make a video player which contains vimeo and local video but I'm dont know how to switch the video source to local video if the vimeo video fails to play.Im using video.js.any help please :)
here is my coding:
HTML
<video id="vid1" src="" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
Javascript:
videojs('vid1', { "techOrder": ["vimeo"], "src": "https://vimeo.com/63186969" }).ready(function() {
// You can use the video.js events even though we use the vimeo controls
// As you can see here, we change the background to red when the video is paused and set it back when unpaused
this.on('pause', function() {
document.body.style.backgroundColor = 'red';
});
this.on('play', function() {
document.body.style.backgroundColor = '';
});
// You can also change the video when you want
// Here we cue a second video once the first is done
this.one('ended', function() {
this.src('http://video-js.zencoder.com/oceans-clip.mp4');
this.play();
});
i make some changes to my js but still unable to change.im new to javascript..please help me :)
Javascript:
videojs('vid2', { "techOrder": ["vimeo"], "src": "https://vimeo.com/63186969" }).ready(function() {
// You can use the video.js events even though we use the vimeo controls
// As you can see here, we change the background to red when the video is paused and set it back when unpaused
this.on('pause', function() {
document.body.style.backgroundColor = 'red';
});
this.on('play', function() {
document.body.style.backgroundColor = '';
});
// You can also change the video when you want
// Here we cue a second video once the first is done
this.one('ended', function() {
this.src('http://vimeo.com/79380715');
this.play();
});
myPlayer.src("http://video-js.zencoder.com/oceans-clip.mp4");
var myPlayer = videojs('vid2');
myPlayer.ready(function(){ /*Video is ready*/ });
myPlayer.error(function(){ /*An error happened*/ });
mpPlayer.play();
]);
So there are the 2 events:
var myPlayer = videojs('example_video_1');
myPlayer.ready(function(){ /*Video is ready*/ });
myPlayer.error(function(){ /*An error happened*/ });
More api info here : https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md

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>

Categories