I have a few events in my app that make sounds.
For example,
Background music which is looped
Background on click makes a sound
When two rectangles collide it makes a sound
What i want to have is a button which when clicked toggles between letting the sounds play and not letting them play.
I don't want to have a load of if statements on each sound, so is there a way around this ?
Here is how im calling my sounds at the moment
//HTML
<div id='mainRight'></div>
//JS
var mainRight = $('#mainRight');
$(mainRight).width(windowDim.width/2).height(windowDim.height);
$(mainRight).addClass('mainRight');
var sounds = {
coinHit : new Audio('./sound/coinCollect.wav'),
playerClick : new Audio('./sound/playerClick.wav'),
gameOver : new Audio('./sound/gameOver.wav'),
backgroundMusic : new Audio('./sound/backgroundMusic.wav')
}
sounds.backgroundMusic.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
sounds.backgroundMusic.play();
sounds.backgroundMusic.volume = 0.01;
$('#mainRight').click(function()
{
sounds.playerClick.load();
sounds.playerClick.play();
}
Try this...
function toggleAudio() {
for(var key in sounds) {
sounds[key].muted = !sounds[key].muted;
}
}
Just fire that every time you hit the mute button. It will toggle the muted state of each Audio object in the sounds object.
Related
I tried making a visual novel for learning. I can't figure out how to stop/pause my audio file in javascript/jQuery.
I want to play and pause different music if a character appears. They appear if the counter has a certain value - the music has to do the same. The music starts playing when the data-current is at 2 but doesn't pause/stop with the method pause() at data-current == 5
How can I solve this problem?
$('#textbox').click(function () {
// ...
var musics = ['MagicalForest.mp3', 'bunnymusic.mp3', ]
var IntroAudio = new Audio(musics[0]);
var bunnyAudio = new Audio(musics[1]);
if ($('#textbox').attr('data-current') == 2) {
IntroAudio.play();
}
if ($('#textbox').attr('data-current') == 5) {
IntroAudio.pause();
bunnyAudio.play();
};
};
So I'm struggling to find a solution to play/stop/pause sound on "click" i.e. when focusing with a black dot with A-Frame sound entity... What I would like to have is a plain, shape or whatever with a play/pause image on it, which would trigger audio when focused. Did anyone encounter something similar perhaps?
<audio id="sound" crossorigin="anonymous" preload="auto" src="some-audio-file.mp3"></audio>
... would trigger something like sound="on: click; src: #sound"
try making a custom component
AFRAME.registerComponent('audiohandler', {
init:function() {
let playing = false;
let audio = document.querySelector("#audio");
this.el.addEventListener('click', () => {
if(!playing) {
audio.play();
} else {
audio.pause();
audio.currentTime = 0;
}
playing = !playing;
});
}
})
and use it within Your 'button"
<a-box audiohandler> </a-box>
You can check all media methods, properties etc here.
You can check this button here.
I need to include some sound files on a website, i recorded them and used the super complicated:
<a href="seo.html" onmouseover="new Audio('sounds/seo.mp3').play()">
to play them when the user scrolls over with the mouse. There are a total of four links on the website.
The problem is, when i mouse over one of them it starts playing, and then if i mouse over another it plays that one as well. If i move the mouse really fast accross the links i end up getting Giberish because all files are being played at the same time. How do i stop this ??
Ideal would be that the others CANNOT be played until the current playing is finished :)
An approch below.
Note, untested ;-)
HTML
a sound link -
a sound link -
a sound link -
a sound link
JS
var links = document.querySelectorAll('a.onmousesound');
var currentPlayedAudioInstance = null;
var onHoverPlaySound = function(element) {
if (currentPlayedAudioInstance &&
currentPlayedAudioInstance instanceof Audio) {
// is playing ?
// http://stackoverflow.com/questions/8029391/how-can-i-tell-if-an-html5-audio-element-is-playing-with-javascript
if (!currentPlayedAudioInstance.paused && !currentPlayedAudioInstance.ended && 0 < currentPlayedAudioInstance.currentTime) {
return false;
}
}
var file = element.getAttribute('data-file');
currentPlayedAudioInstance = new Audio(file);
currentPlayedAudioInstance.play();
};
for (var i = 0; i < links.length; i++) {
link.addEventListene('onmouseover', function() {
onHoverPlaySound(links[i]);
});
};
Before I go into the problem I would like to say that this is the first time I'm trying to write javascript using OOP. So please bear with me and guide me if I doing anything wrong.
As title says I am using HTML5 video to play videos in my application and here is the code which I wrote.
I have created an object Screens where I have a video tag.
var Screens = {
getVideoScreen:function(){
return "<div id=\"celebration\"><video id=\"myvideo1\" width=\"300px\" ><source src=\"video/winning.mp4\" type=\"video/mp4\"></video></div> ";
},
getVideoElement:function() {
return $("#celebration");
}
};
This is an object where I actually control video.
var obj = Object.create(Screens);
obj.playVideo = (function() {
var videoFile = "";
var play = false;
function start() {
$("body").append(obj.getVideoScreen());
document.getElementById("myvideo1").play();
document.getElementById("myvideo1").addEventListener("ended",function(){
end(); console.log("end");
}, false);
}
function end() {
obj.getVideoElement().remove();
}
return {
startVideo:function(flag) {
play = flag;
if(play) {
start();
}
else {
end();
}
}
}
})();
I have a button and on click it plays video,
$("#start").click(function() {
obj.playVideo.startVideo(true);
});
This works fine for around 5 to 10 times and later on it doesn't work. Doesn't work mean I get a white screen and video doesn't play. I inspected the page and video tag is there but doesn't play the video. I really don't have any idea about what is going wrong. I saw few posts and that didn't help. Looking ahead for a help....
EDIT :
I am using chrome Version 26.0.1410.64 m. And I'm concerned only about this browser.
You can see this page.
I'm trying to create an animation of series of images with background audio using HTML5 and javascript maybe ajax or jquery. I'm basically trying to make an animation of a simple conversation between several people (portrayed by images) and speech through (audio).
I have an audio file (mp3/ogg) and a series of images. When I play the audio, the sequence of images will be displayed accordingly.
Here's the catch, If I pause or replay the audio, sequence of image must also stop or replay from the start.
So the sequence of images must be in sync with the audio playing.
Any ideas or concepts? Right now I have a working jPlayer with play/pause. Also can it be done with jPlayer?
Just make your decisions based on the currentTime of your audio. Example
var audio = document.querySelector('audio'),
img = document.querySelector('img'),
imgs = ['http://raptorsrepublic.com/wp-content/uploads/2012/08/meh_cat.jpg', 'http://2.bp.blogspot.com/_8tZf9lm-smo/R7hn7pNx-jI/AAAAAAAAALI/86DN7VedT_Q/s400/meh.jpg', 'http://2.bp.blogspot.com/-yWsoWNVX4jU/UAy5uJxD52I/AAAAAAAANSc/OTje6k_C5Q8/s1600/meh2.jpg'],
duration, interval, currentImg;
(function callee(ready) {
if (ready !== false) ready = true;
if (!ready) {
return audio.addEventListener('canplaythrough', callee);
}
if (!audio.playing) audio.play();
if (!duration) {
duration = audio.duration;
interval = duration / imgs.length;
}
if (isNaN(duration)) return setTimeout(callee, 1000);
var currentTime = audio.currentTime;
if (!currentImg) {
img.src = currentImg = imgs[0];
}
var currentTimeImage = imgs[Math.floor(currentTime / interval)];
if (currentTimeImage != currentImg) {
img.src = currentImg = currentTimeImage;
}
setTimeout(callee, 1000);
})(false);