I'm working with Howler.js on a little alarm clock I'm working on.
For my alarm clock, I want to play 2 audio files sequentially when the current time matches a predetermined time.
I've got this code:
var play_sound = window[data.sound];
presound.play();
presound.once('end', function(){
play_sound.play();
});
The problem is, this code plays my presound 2 times, and then play_sound afterward. I do not want it to play the presound 2 times, only once.
If I change the code to
presound.play();
play_sound.play();
It seems to work, it doesn't play them at the same time, but I worry that it might in some cases. So I want to avoid these files being played at the same time, and I also want to avoid either of them playing more than once.
How can I do what I'm trying to do while utilizing events to make sure there is no overlap?
I also tried this:
presound.once('play', function() {
presound.once('end', function() {
play_sound.play();
});
});
presound.play();
but it also plays my presound twice.
Here I can see another example with end event:
// Fires when the sound finishes playing.
sound.on('end', function(){
console.log('Finished!');
});
Did you try on instead of once?
UPD:
Cannot reproduce an issue.
A code snippet that I use:
function clickme() {
var presound = new Howl({
src: ['sound.m4a'],
html5: true
});
var play_sound = new Howl({
src: ['sound2.mp3'],
html5: true
});
presound.play();
// Fires when the sound finishes playing.
presound.once('end', function() {
play_sound.play();
});
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.core.min.js"></script>
</head>
<body>
<input type="button" onclick="clickme()" value="Hello" />
</body>
</html>
Related
I'm working on a music webapp that plays a random sequence of notes, but I ran into this issue: whenever it was the case that I was going to press play for the first time after the page loaded, the sequence would "choke" before getting on track. I thought maybe that was because the resources are not yet loaded when I press play for the very first time. I guess I was right, did some research, found this preload = auto thing, which seemed to solve this problem. At least, if you refresh or visit the page for the first time and press play immediately, it works just fine. However, if you don't do anything for a while, like 2/3 minutes, the same thing happens. There's a delayed start, as if it's loading the file, and then it awkwardly speeds up like it's trying to catch up with the setInterval timer. I wrote this very simplified version of the code just to illustrate:
<button>Play</button>
<audio src="source1.mp3"></audio>
<audio src="source2.mp3"></audio>
<audio src="source3.mp3"></audio>
<script>
let notes = []
document.querySelectorAll("audio").forEach(function(note){
notes.push(note)
})
function play(){
let random_index = Math.floor(Math.random() * 3),
note = notes[random_index]
note.play()
setInterval(function(){
note.pause()
note.currentTime = 0
play()
}, 500)
}
let button = document.querySelector("button")
button.addEventListener("click", function(){
play()
})
</script>
So my question is how do I solve this? Is there anyway to tell the function to hold until it can actually play the first file? Maybe a DOM event that fires when the resource is buffered and ready? I feel like I can't relly let the timer begin until I have a way to check that, otherwise it will go crazy as usual. Any ideas will be greatly appreciated!
The load event is called after the page is fully loaded:
window.addEventListener("load", function(){
// Your code
});
The DOMContentLoaded event is called after the DOM is loaded but before css and img.
document.addEventListener("DOMContentLoaded", function(){
// Your code
});
I am trying to make a chrome extension. Right now I have these codes:
<button style="text-align:center; margin-bottom: 5px;" id="myboobutton">DogMeme.avi</button>
<script type="text/javascript" src="popup.js"></script>
The html that will be the button that plays a sound
I am making a button and giving it an id so it can call a Javascript file to play a sound (I have to do this because you can't run JS on the HTML of a chrome extension.)
The button has an ID of 'myboobutton'
function myboo() {
var heyboosong = new Audio();
heyboosong.src = "myboo.mp3";
heyboosong.volume=0.5
heyboosong.play();
}
document.getElementById('myboobutton').addEventListener('click', myboo);
The button calls this popup.js so it can play the audio file.
I have a soundboard extension that plays various songs that are mp3s. When they play in the chrome extension they sound echoey. When the individual audio files play they sound fine. I suspect that it is making multiple calls to the function resulting in the echo. I am trying to figure out how to fix it. (thanks Makyen for helping to clarify) I've tested again and it still makes it.
It seems like all mp3 sounds seem to do this. Not sure if it is specific to chrome extensions or not. But it doesn't seem to happen on faster PCs as much. I am new to coding, I have just learned all of this in the past week. Thanks a bunch!
Here is the unpacked extension
https://drive.google.com/drive/folders/0B3AU3p8wyWK3YXo1YUlGWGg5RGs?usp=sharing
You can disable the button in the click event and create a setTimeout() function to enable the button again after a certain period of time.
For example:
var mybooBtn = document.getElementById('myboobutton');
mybooBtn.addEventListener('click', function() {
mybooBtn.disabled = true;
setTimeout(function() {
mybooBtn.disabled = false;
}, 1000);
// code to play sound goes here
});
Here's a fiddle: https://jsfiddle.net/g9wx30qj/
You need to apply the debounce/throttle concept. It is meant to be used when a function needs a delay between executions (i.e. ajax calls in typeahead plugins).
You can use a simple Throttle implementation:
var Throttle = function(fn, time) {
var flag = true, toId;
return function() {
if (flag) {
var args = arguments;
fn.apply(this, args);
flag = false;
clearTimeout(toId);
toId = setTimeout(function() {
flag = true;
}, time);
}
}
};
And then, in your code:
document.getElementById('myboobutton').addEventListener('click', Throttle(myboo,1000)); //1000ms is 1second
Ok,do one thing;(I am showing a solution using jQuery)
$("#myboobutton").click(function(){
$("#myboobutton").css("pointer-events","none"); //click 'll be disabled by this
//write code for playing sound;
setTimeout(function(){
$("#myboobutton").css("pointer-events",""); //button 'll be clickable again after 1 sec
},1000)
})
I have a way to play sound with a simple command, https://github.com/admsev/jquery-play-sound, but the audio file I am playing is about 2 minutes long. I need a way to stop/silence the audio with a javascript or jquery command. Does anyone know how I could do this? I don't really want a button that stops the sound unless it was a regular html button that could do other things besides stop the sound.
The jQuery playSound library you linked does not support pausing. I think it would be best to choose a different library that supports pausing so you don’t have to write that functionality yourself.
I used the howler.js library before and it worked fine for me. Here is how you would use howler.js:
<!-- to load the library on the page -->
<script src="howler.js">
// to create and play the sound
var backgroundMusic = new Howl({
urls: ['music.mp3', 'music.ogg'],
}).play();
// to pause the sound
// (make sure the variable `backgroundMusic` is accessible)
backgroundMusic.pause();
// to stop the sound
backgroundMusic.stop();
No jQuery, no plugins, just a browser. This is one button that plays and pauses one MP3. You didn't specify what extra things you wanted one single button to do, so I didn't add any extra functions to that one single lonely button. What other things did you want this one solitary button to do?
Btw, if you want the audio to stop instead of pause:
There's a line in the <style> block that you need to uncomment and a line to comment.
There's a line in the <script> block you need to uncomment.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.play:before {
content: '\25b6';
}
.pause:before {
content: '\275a\275a'; /*Uncomment this line for pause */
/* content: '\25a0'; */ /*Uncomment this line for stop */
}
</style>
</head>
<body>
<button id="button" class="play">
<audio id="audio" src="http://glpjt.s3.amazonaws.com/so/av/pf-righteous.mp3"></audio>
</button>
<script>
var audio = document.getElementById('audio');
var button = document.getElementById('button');
button.addEventListener('click', playPause, false);
function playPause() {
if (!audio.paused) {
audio.pause();
// audio.currentTime = 0; // Uncomment this line for stop
button.classList.remove('pause');
button.classList.add('play');
} else {
audio.play();
button.classList.remove('play');
button.classList.add('pause');
}
}
</script>
</body>
</html>
I am trying to play two audio at the same time. One audio is using to provide background music and another one is using to provide speech. I am playing audio on click . After click, audio plays simultaneously and immediately on desktop but on IPad Air and Ipad pro audios play after a delay. I am not getting what is wrong with my code ?
<script>
var audio1 = new Audio();
var audio2 = new Audio();
$(document).ready(function(){
$(".playAudio").on("click touchstart" , function(){
audio1.src= "media/audio/music.mp3";
audio2.src= "media/audio/fullIntro.mp3";
audio1.play();
audio2.play();
});
});
</script>
HTML
<div class="playAudio"><span id="span1">Play Audio</span></div>
Please help !
Thanks !
I highly suspect that your problem might be that both files aren't finished downloading at the same time. Hence the delay between the two audio files.
My suggestion would be to wait for every file to be downloaded before proceeding. You can do so with a little bit of Javascript :
Here's the code
$(window).on("load", function() {
$(".playAudio").on("click touchstart" , function()
{
audio1.src= "media/audio/music.mp3";
audio2.src= "media/audio/fullIntro.mp3";
audio1.play();
audio2.play();
});
});
That should do the trick.
Credits : I found another question that may help you as well
Official way to ask jQuery wait for all images to load before executing something
I would like for two audio files to play one after the other and then stop, using only one audio tag. The problem is when the second audio file plays, it repeats for a while and then just stops. I thought it was a bubbling issue so I used e.stopImmediatePropagation() but that didn't work. I also tried e.preventDefault() e.stopPropagation() and return false. None of which worked as well. I feel like my code is probably off so if someone can tell me whats wrong as well as a better way to go about this it would be greatly appreciated.
$('#audio').on({
'ended' : function(e) {
this.src= 'sounds/new_speech.mp3';
this.play();
$('#audio').on({
'ended' : function(){
document.querySelector('#audio').src= 'sounds/new_sound.mp3';
}
});
e.stopImmediatePropagation();
}
});
You can re-use the same event for one tag playing many tracks:
<audio id=audio controls autoplay
src="http://ia700706.us.archive.org/27/items/3112011-08-06/3.03.ComeOriginal.mp3"></audio>
<script>
var tracks=[
"http://ia700706.us.archive.org/27/items/3112011-08-06/3.04.WildNights.mp3",
"http://ia700706.us.archive.org/27/items/3112011-08-06/3.05.Eons.mp3"
];
$("#audio").on({ended:function(e) {
var track=tracks.shift();
if(track){
this.src= track;
this.play();
}
}});
</script>
live demo: http://pagedemos.com/74yy2ur65zev/