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
Related
Via javascript, I am trying to create the HTML and play an audio file but it's not playing.
If I download that same file and play it via a media player, it plays. My attempt is as below.
var audio = document.createElement("audio");
audio.src = "/files/chat-space/4928f76ff3258fcca32bb75d5d043237";
audio.play();
Is there any way to play this audio inside the browser, even using some other js-supported media player?
Writing the error you're receiving by #ZeroWorks comment would make it much easier, and without an actual example I can only answer it as a guess.
I assume the error you're getting is "play() failed because the user didn't interact with the document first."
I don't know what you're trying to do, but one solution for that could be 'forcing' the client to interact with the document using a button element.
For example:
<script>
function onClick() {
var audio = document.createElement("audio");
audio.src = "./mediaFile.mp3";
audio.play();
}
</script>
Then have the following button element:
<button onclick="onClick()"> Click me </button>
If this is not your issue please try to explain it more precisely.
You can use Audio class in JS
var audio = new Audio('audio_file.mp3'); // file must be having mp3 format
audio.play();
Try:
<script type="text/javascript">
window.addEventListener('load', () => {
var audio = document.createElement("audio");
var asrc = document.createElement("source");
asrc.setAttribute('src', "/files/chat-space/4928f76ff3258fcca32bb75d5d043237");
audio.appendChild(asrc);
audio.play();
});
</script>
Notes:
The window.addEventListener('load') tells the page not to try playing the audio until all HTML and resources are loaded/available.
The audio tag does not have a src= attribute — it has a child element, <source>, and that element has the src= attribute.
FWIW, I just tested the above code on a live server, using a standard mp3 audio file. If this code does not work for you, first try it with a standard .mp3 file (to ensure the problem is not with specifying the audio file).
If it still doesn't work, please tell us more about your environment.
See:
https://www.w3schools.com/TAGS/tag_audio.asp
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)
})
How would I play an audio file in javascript that has been spliced into two byte arrays and loaded separately from a server at different times? I want to load the first half of an mp3 file, then, while the mp3 is playing, load the second half and seamlessly continue playing through the whole file.
You can use the canplaythrough and ended events to, play the first audio while loading the second, then play the second after loading. Something like this:
var canPlayAudio2 = false;
var audio1Ended = false;
var audio = document.createElement('audio');
audio.src = "your_audio_source";
audio.addEventListener('canplaythrough', function() {
//after first audio loads, start loading second audio
var audio2 = document.createElement('audio');
audio2.src = "your_audio2_source";
audio2.addEventListener('canplaythrough', function() {
canPlayAudio2 = true;
if (audio1Ended) {
audio2.play();
}
});
//play the first audio, play second audio if availible once finished
audio.play();
audio.addEventListener('ended', function() {
audio1Ended = true;
if (canPlayAudio2) {
audio2.play();
}
});
});
While the first part is playing, create another audio tag to pre-load the second half, but do not play it.
<audio src="the second half.mp3” preload="auto"></audio>
When the first audio trigger the ended event, change its URL to the second half.
The browser will get the file from cache and starts to play it immediately.
Sorry for my poor English, hoping this helps.
I'm trying to use this slider: http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/ but want to play a different audio file, each time the slide loads.
The way I imagine it working, is for the user to click play on the first slide, the audio to finish playing, then for the slide to change and it automatically plays the next audio file and so it continues until all slides are played through.
I've gotten it to the point where the slider changes when the audio has stopped, but cannot figure out how to play the next audio file, one after the other.
I'm very new to jQuery and am struggling a lot. Any help would really be appreciated!
Here is my work in progress: http://dailycrow.me/actualsite/
Thank you.
What I would do is to handle the audio playing with an scripting language such as PHP and call the needed method with parameters with Javascript or JQuery.
You can embed HTML with PHP so the audio can be played. Something like this:
$audioFile = "wishedAudioFile.mp3";
echo '<embed src="'.$audioFile.'" hudden="true" autostart="true"></embed>';
you can maintain an array of sources, where each index refers to a slide index, and from looking at this doc, you can use the onAfterChange event, code would be something like:
var audio = new Audio(), audSrcList = [
'slide1.wav',
'slide2.wav',
'slide3.wav',
'slide4.wav'
...
];
function afterSlideChange(slide, index){
audio.src = audSrcList[index];
audio.play();
};
...
$.Slitslider.defaults = {
...
// callbacks
onBeforeChange : function( slide, idx ) { return false; },
onAfterChange : afterSlideChange //CHANGED here
};
I'm working on a mobile device running iOS.
I have a DIRECT download link to an audio file (when I open it on desktop the download starts immediately). I try this but it plays only one time.
<script>var audio = new Audio("'+downloadUrl+'");</script> <button onclick="audio.play();">Play</button>
I also try to catch it with an <iframe> but it plays only one time.
When I use <audio> ,"streaming" appears and I have the same problem :
I think it's because my file is not saved on my phone. So how can I fix it, so that it plays as required.
Thanks in advance,
Let's take a look at the HTMLMediaElement DOM interface and Media Events
var audio = new Audio(downloadUrl);
audio.addEventListener('ended', function () {
audio.currentTime = 0; // seek to position 0 when ended playing
/* // alternatively, not sure about compatibility
audio.fastSeek(0);
*/
});
If you wanted it to loop rather than be playable again, set loop to true instead.