I have a client that would like background music to be playing while her students take a quiz. However, the quiz requires that certain audio files play through onclick effects. When a student clicks to play an audio file, my client would like the background music to mute, then resume playing once the onclick audio file is finished.
Is there any way to do this? Here is the code I'm using to fire the small, onclick audio effects:
var effect1 = document.createElement('audio');
effect1.setAttribute('src', 'audio.mp3');
$.get();
effect1.addEventListener("load", function() {
effect1.play();
}, true);
$('.effect1').click(function() {
effect1.play();
});
And here is my background music code:
<audio autoplay loop>
<source src="background.mp3">
</audio>
Any help is appreciated. Thanks!
Lauren
add an id to your audio tag
<audio id="bgplayer">
and then use jQuery to pause it before playing the click
$('#playeffect').click(function() {
$('#bgplayer').pause();
$('#effect1').play();
to resume it, you will need to add a listener to get fired at the end event of the clip
$('#effect1').on('ended', function() {
$('#bgplayer').play();
});
Related
I'm working on a page that, on my client's request, loads playing a background soundtrack.
Of course it's just for those users who are not navigating with audio autoplay disabled.
So the simple piece of code used to start playing the music is something like the following:
<audio autoplay id="background-soundtrack">
<source src="mytrack.mp3" type="audio/mpeg">
</audio>
I'd like to make music stop (even better: make it fade out in a matter of a few seconds) as soon as the user clicks anywhere on the page -- it should work tapping on mobile devices too.
Can you please suggesitng me a smart way to achieve my goal?
It doesn't matter if it's pure JavaScript or jQuery.
Thanks!
try this jquery:
$('document').on('click','body',function(){
if ($('#background-soundtrack').paused == false){
$('#background-soundtrack').animate({volume: 0}, 1500,
//1500 duration time
function(){
$('#background-soundtrack').pause()
});
}
});
The HTML5 audio elements has the pause method, that you can use at "onClick" (work in touch too) event on body, document, window...
Like this (I delete the "-" in id):
document.onclick = function(e){
backgroundsoundtrack.pause();
}
<audio autoplay id="backgroundsoundtrack">
<source src="mytrack.mp3" type="audio/mpeg">
</audio>
I want to code an HTML5 video player without any controls. Just autoplay and loop multiple videos from a directory "my website/media" fullscreen.
The tag including "autoplay loop" and some CSS to get the video fullscreen is working fine for me, but I can't play more than one video.
Is it possible to add more videos without using any controls or visible playlists? Just playing all videos from my directory automatically in the loop?
<div class="fullscreen-video-wrap">
<video src="media/firstvideo.mp4" autoplay loop></video>
</div>
There is an "ended" event you can listen for on a element. You can do something like this to replace the src with a new video after the first one ends.
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = "http://mysite/myMovie2.m4v";
myVideo.load();
myVideo.play();
}
// add a listener function to the ended event
function myAddListener(){
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('ended', myNewSrc, false);
}
I'm trying to design my own audio player.
I made "play", "pause" and "stop" symbols (Png format) and I couldn't find a solution to actually ad play pause and stop functions when you click on them.
I figured out how to play sound when the word "play" is clicked (no button) but I'm lost when it comes to add "pause" or "stop".
I'm a rookie using html/css so please forgive me if I'm not very clear.
This is what I have so far:
<audio id="audio" src="sons/son.mp3" autostart="false" ></audio>
<a onclick="PlaySound()"> Play </a>
<script>
function PlaySound() {
var sound = document.getElementById("audio");
sound.play()
}
</script>
Thank you for your answers.
you were on the right way to achieve this !
At first you declare globally your variable sound to get it from your three functions. To pause your sound you use the .pause() method and to stop it you return to 0 second playback time with the .currentTime property.
The code:
<audio id="audio" src="sound.mp3" autostart="false" ></audio>
Play
Pause
Stop
<script>
const sound = document.getElementById("audio")
function PlaySound() {
sound.play()
}
function PauseSound(){
sound.pause()
}
function StopSound(){
sound.pause()
sound.currentTime = 0
}
</script>
Hope it helps you !
SAME ISSUE! As we all know firefox and audio is a problem because of patents and such. I found this little code on the internet to play my sounfile.
I would like to play multiple files instead of just one while having the display bar not show up in the browser
you can change the player width to 0 but than the user can not click the play button :P
Is there a way of possibly having the sound play on click of a link or button.
Please note. Do not give me codes that have no compatibility outside chrome and ie.
HTML
<audio id="audioplayer" preload controls loop style="width:400px;">
<source src="sounds/sound1.mp3">
<source src="sounds/sound1.caf">
</audio>
Javascript
<script type="text/javascript">
var audioTag = document.createElement('audio');
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {
AudioPlayer.embed("audioplayer", {soundFile: "sounds/sound1.mp3"});
}
</script>
RECAP:
Have the sound play on a button or link click.
Have multiple sounds available to play (not just one)
Compatibility with firefox
non visible soundbar.
Still learning myself. But this is a button, with a script to play an audio file. (part of my own solution) Plays only 1 sound at a time, but doesn't show anything about it.
You could also make a funtion like this, without setting the src, using the pause() command.
currenttime is used to change the part where the audio file was.
Sound play button<br>
<script>
sound = new Audio();
function playSnd(soundSrc) {
sound.src = soundSrc;
sound.play();
}
</script>
I'm new to JavaScript, but I know, that I could set and play some audio file with this code:
player.src = "somefile.mp3";
player.play();
Where "player" is id of my audio tag. My question is: how can I preload the song? Because when I click on button, it plays after 3s delay...
Audio element has preload attribute:
<audio preload="auto|metadata|none"> // auto in your case