Can I stop an html audio manually in a way that it raises the "ended" event?
<script>
var audio = new Audio();
audio.src = "https://translate.google.com/translate_tts?&q=text&tl=en&client=a"
audio.play();
audio.addEventListener("ended", function() {
console.log("audio ended");
});
audio.addEventListener("play", function() {
window.setTimeout(function() {
audio.pause(); //stop audio half sec after it starts - this doesn't raise the "ended" event!
}, 500);
});
</script>
You can do that but its on timeupdate event folowing code with jQuery and JS respectively
<audio ontimeupdate="watchTime4Audio(this.currentTime,this.duration)" ... ></audio>
IN HTML
//jQuery
$('audio').on('timeupdate',function(){
if($(this).prop('currentTime')>=$(this).prop('duration')){
//the song has ended you can put your trigger here
}
});
//JS
audio.addEventListener('timeupdate', function() {
if(this.currentTime >= this.duration){
//the song has ended you can put your trigger here
}
});
Using Javascript/JQuery
Related
Add added audio to my simple website and when i first click the button the audio does not play. After the second click it will play. If I wait a while then the problem will return.
There are no errors in the console and I even see chromes speaker icon on the tab but hear nothing.
Play
<script src="index.js"></script>
<script type="text/javascript">
// play audio on button click
document.getElementById('play').addEventListener('click', function () {
var audio = new Audio()
audio.src = '1.ogg'
// listen for can play event
audio.addEventListener('canplay', function () {
audio.play()
})
});
</script>
I also tried howler.js but the same problem happened.
<script type="text/javascript">
// play audio on button click
document.getElementById('play').addEventListener('click', function () {
var audio = new Audio();
audio.src = '1.ogg';
// added a volume value
audio.volume = 1;
// listen for can play event
audio.addEventListener('canplay', function () {
// try a console log to see if the function is called correctly
console.log("hello");
audio.play();
})
});
</script>
i added a console log to see if your function is really called
and put an volume so you are sure that the volume is not 0
Works fine
document.getElementById('play').addEventListener('click', function() {
var audio = new Audio()
audio.src = 'https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3'
audio.addEventListener('canplay', function() {
audio.play()
})
});
<button id="play">play</button>
I am new to Jquery and Javascript. I want my code to play a sound when clicking anywhere in the document, and a different sound when double clicking on a .marker.
It works right now, but when I double click the marker it plays the .click function twice along with the double click function.
How do I prevent the .click from playing when I double click?
Here is my Jquery code:
$(document).ready(function () {
$(document).click(function () {
setTimeout(function () {
let audio = document.createElement("audio");
audio.src = "audio/click-audio.wav";
audio.play();
}, 700);
});
$('.marker').dblclick(function () {
let audio = document.createElement("audio");
audio.src = "audio/page-audio.wav";
audio.play();
});
});
Just check whether clicked element is .marker :
$(document).click(function(event) {
if($(event.target).is(".marker")) return ;
setTimeout(function() {
let audio = document.createElement("audio");
audio.src = "audio/click-audio.wav";
audio.play();}, 700);
});
Using event properties, you could achieve
$('marker').click(function(event) {
if(!event.detail || event.detail == 1){
// code here.
// It will execute only once on multiple clicks
}
});
The stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.
$(document).click(function () {
setTimeout(function() {
let audio = document.createElement("audio");
audio.src = "audio/click-audio.wav";
audio.play();}, 700);
});
$('.marker').click(function (event) {
let audio = document.createElement("audio");
audio.src = "audio/page-audio.wav";
audio.play();
event.stopPropagation();
});
});
hope it will help you
Referring to MediaElement.js. How to trigger an event (call a function), if some specific audio file has ended?
var myAudioFiles = ['audioFile1.wav', 'audioFile2.wav', 'audioFile3.wav'];
var myPlayer = new MediaElementPlayer('#myPlayer');
myPlayer.setSrc(myAudioFiles[0]);
myPlayer.play();
Pseudo Code:
if (hasEnded(myAudioFiles[0])) {
doSomething();
}
Please try this.
$(function(){
$('audio,video').mediaelementplayer({
success: function(player, node) {
player.addEventListener('ended', function(e){
player.src = 'media/somefile.mp4';
player.load();
player.play();
});
}
});
});
copied from here:
mediaelement.js - play another video at end of 1st video
I'm looking to restart an audio file in a HTML5 audio player. I have defined a audio file and a play button.
<audio id="audio1" src="01.wav"></audio>
<button onClick="play()">Play</button>
When I click the play button the audio file starts playing, but when I click the button again the audio file doesn't stop and will not play again until it reaches the end of the file.
function play() {
document.getElementById('audio1').play();
}
Is there a method that would allow me to restart the audio file when I click the button using onclick rather than waiting for the song to stop?
To just restart the song, you'd do:
function play() {
var audio = document.getElementById('audio1');
if (audio.paused) {
audio.play();
}else{
audio.currentTime = 0
}
}
FIDDLE
To toggle it, as in the audio stops when clicking again, and when click another time it restarts from the beginning, you'd do something more like :
function play() {
var audio = document.getElementById('audio1');
if (audio.paused) {
audio.play();
}else{
audio.pause();
audio.currentTime = 0
}
}
FIDDLE
soundManager.setup({
preferFlash: false,
//, url: "swf/"
onready: function () {
soundManager.createSound({
url: [
"http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3", "http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg"
],
id: "music"
});
soundManager.createSound({
url: [
"http://www.w3schools.com/html/horse.mp3",
],
id: "horse"
});
soundManager.play("music");
}
}).beginDelayedInit();
And to start horse and pause all other sounds currently playing in a click event:
$("#horse").click(function () {
soundManager.stopAll();
soundManager.play("horse");
});
function sound(src) {
this.sound = document.createElement("audio");
this.sound.src = src;
this.sound.setAttribute("preload", "auto");
this.sound.setAttribute("controls", "none");
//this.sound.style.display = "none";
document.body.appendChild(this.sound);
this.play = function () {
this.sound.play();
}
this.stop = function () {
this.sound.pause();
this.sound.currentTime = 0
}
}
you can use the /above function to play sound
let mysound1 = new sound('xyz.mp3')
mysound1.play()
I made a javascript audio test. All the function works in Opera FF and Chrome, except audio.oncanplaythrough, and audio.onended (this 2function dont work on Chrome).
<!DOCTYPE html>
<html>
<body>
<script>
var audio = new Audio("http://www.w3schools.com/html5/song.ogg");
audio.oncanplaythrough = function(){
audio.play();
}
audio.onended = function(){
alert('ended');
}
</script>
start<br/>
pause<br/>
volume<br/>
jump<br/>
</body>
</html>
oncanplaythrough is an event, not a method, and the other event is called ended and not onended.
So you need to listen for the events and act on them. Try:
audio.addEventListener('ended', function() {
alert('ended');
}, false);
and
audio.addEventListener('canplaythrough', function() {
audio.play();
}, false);
Add and play a sound via JavaScript
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'loading.ogg');
audioElement.play();
Get the song filepath and duration
audioElement.src;
audioElement.duration;
Load a sound
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'Mogwai2009-04-29_acidjack_t16.ogg');
audioElement.load()
audioElement.addEventListener("load", function() {
audioElement.play();
$(".duration span").html(audioElement.duration);
$(".filename span").html(audioElement.src);
}, true);
Stop a song
audioElement.pause();
Change volume
audioElement.volume=0;
Play at exactly 35 seconds in the song
audioElement.currentTime=35;
audioElement.play();