player plays two times on first click - javascript

I am having a tough time I have a code where you click on a image and if it possible to move it to next cell the it should move
function changecell(a){
var moved=false;
if(a%3 !=0) {
if(ij[a-1]==0) {
moved=true;
if(moved==true) {
no=firstmove++;
move.innerHTML = no;
playTick();
}
swap(a-1,a);
}
}
if((a+1)%3 !=0 && moved==false) {
if(ij[a+1]==0) {
moved=true;
if(moved==true) {
no=firstmove++;
move.innerHTML = no;
playTick();
}
swap(a+1,a);
}
}
}
function playTick() {
document.getElementById('tickSound').play();
}
function swap(x1,x2) {
var temp=ij[x1];
ij[x1]=ij[x2];
ij[x2]=temp;
var p = eval("document.images.i"+x1);
p.src="images1/"+ij[x1]+".png";
p = eval("document.images.i"+x2);
p.src="images1/"+ij[x2]+".png";
}
my problem is for first click the sound plays for two times and then after that it plays once as it is supposed to play.
Does anybody have any idea about this?
EDIT:
I did put an alert() in the if(moved==true) loop the alert shows only for once but sound plays twice. Suppose the if(moved==true) was getting executed again wouldn't I get another alert()?

I'm thinking that both the if conditions are being satisfied on the first run so the playTick() method is being called twice. Without knowing the value of a, i cannot be sure.

Related

The video loop is multipling itself more than one time every time it ends

This question is using Aframe .
I have the videosphere on loop manually with addEventListener on ("end").
Code works fine until I look at the console. It gives me strange logs.
myvideo = document.querySelector("#videoSphere");
var aEntranceScene1 = document.querySelectorAll("#playButton1");
for (var i = 0; i < aEntranceScene1.length; i++) {
aEntranceScene1[i].addEventListener("click", function () {
Scene1();
});
};
function Scene1(){
myvideo.setAttribute("src", "video/AEntranceScene1.mp4");
myvideo.currentTime = 0;
myvideo.play();
console.log("playing AEntranceScene1");
Hotspots();
myvideo.addEventListener("ended", function () {
console.log("AEntranceScene1 ended");
Scene1();
});
};
function Hotspots() {
sceneIndex = 1;
document.querySelector("#DButton").emit("disappear");
setTimeout(function () {
if (sceneIndex == 1 && !myvideo.paused) {
document.querySelector("#DButton").emit("move-start");
}
}, 3000);
};
When the video plays first time. It displays the log "playing
AEntranceScene1 and when it ended, log displays "AEntranceScene1 ended" 1 time as expected.this (Attached the photo0) played 1 time
But then when the video play again. It displays the log "playing
AEntranceScene1" several times, not only add one. When it ended, log also displays several times of "AEntranceScene1 ended" this (Attached the photo1) played 2 time
This would get worst as more loop completed.This (Attached the photo2) played 3 times only
[
Can you explain to me whats happening here? and any fix to my code?
Thank you
I have found the answer myself.
Its caused by putting autoplay in the <a-assets>,
once i deleted autoplay, it works fine

Changing sound effect on a function when variable changes

I'm writing a homework assignment for a JS class, and the teacher wants us to have a weapon sound when firing, but stop making sound when out of ammo.
I have the sound effect working for when the gun fires, but it continues making the sound when clicked with 0 ammo.
I tried doing an else{} function, but this breaks the "ammo display" in my browser, and the sound would continue playing anyway.
HTML:
<input type="button" value="Heal" class="shoot" onclick="shoot();">
<audio id="heal" src="sound/heal.mp3">
JS: Displays ammo starting at a maximum of 6 shots, with 6 shots in reserve, and counts down each time it is fired.
function shoot() {
if (currentAmmo > 0) {
currentAmmo--;
}
var shoot = document.getElementById("shoot");
shoot.play();
updatescreen();
function updatescreen() {
document.getElementById("total-ammo").innerHTML = "Bullets in Gun:</br>" + totalAmmo;
document.getElementById("current-ammo").innerHTML = "Reload Ammo:</br>" + currentAmmo;
}
You just need to move the play command inside the if-condition.
if (currentAmmo > 0) {
currentAmmo--;
var shoot = document.getElementById("shoot");
shoot.play();
}
updatescreen();
Place the play call inside your if statement, so it plays only if the statement is true:
function shoot() {
if (currentAmmo > 0) {
currentAmmo--;
document.getElementById("shoot").play();
}
}

javascript slider change call function sequence

Following are some code for explaining
$("#upperBound").on('input',function(){
console.log("1");
loadAndViewImagethresholding(imageId);
console.log("4");
});
function loadAndViewImagethresholding(imageId) {
_("thresholdingdicomImage").style.opacity = "0.3";
var elementthresh = $('#thresholdingdicomImage').get(0);
cornerstone.enable(elementthresh);
var imageIdpro="wadouri:"+"http://localhost:8888/dicomread/temp/"+loadfileName;
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.loadImage(imageIdpro).then(function(imagepro) {
upper=_("upperBound").value;
lower=_("lowerBound").value;
for (var i = 0;i<image.getPixelData().length;i++) {
if(imagepro.getPixelData()[i]<lower||imagepro.getPixelData()[i]>upper)
{
imagepro.getPixelData()[i]=image.minPixelValue;
// console.log("imageproCopyaftercompare:"+imagepro.getPixelData()[436512]);
}
else{imagepro.getPixelData()[i]=image.maxPixelValue;
//console.log("imageproCopyaftercompare:"+imagepro.getPixelData()[436512]);
}
}
console.log("imageproCopyaftercompare:"+imagepro.getPixelData()[436512]);
var viewportthresh = cornerstone.getDefaultViewportForImage(elementthresh, imagepro);
console.log("2");
cornerstone.displayImage(elementthresh, imagepro);
});
});
}
So the basic idea is to use slideupperBound to change upper (lower) value to threshold image, but it seems nothing changed after I change slider. I make a console.log for 436512th pixel, It seems after give slider input that imagepro(which is a raw data array) has been changed, but next displayImage is not implemented.
Then I make a console.log("1 to 4") to see how that slider event implement, the result is 1,4,2,3 rather than 1,2,3,4 as I expect.
So my question is how does this slider implement? Will it implements 1,4 first then calling the function(loadAndViewImagethresholding(imageId);) inside?
If possible, give me some idea to fix that problem, any help appreciated.
BTW, cornerstone is the js I used.

JavaScript audio object stopping in the middle of playing

In a project I'm working on, I have a JS file that should play a piece of music, and when that piece is done playing, the next one takes its place.
var soundtrack = {
0: new Audio("./music/piece1.ogg"),
2: new Audio("./music/piece2.ogg"),
1: new Audio("./music/piece3.ogg"),
3: new Audio("./music/piece4.ogg")
}
var currentTrack = 0;
function startMusic(){
soundtrack[currentTrack].play();
soundtrack[currentTrack].addEventListener("ended", function(){ nextSong()});
}
function nextSong(){
currentTrack += 1;
if(currentTrack == 4){
currentTrack = 0;
}
soundtrack[currentTrack].play();
}
$( document ).ready(function() {
setTimeout(function() { startMusic(); }, 15500);
});
My use of the object "soundtrack" may be unconventional, but there was a bug using an array so I tried this and it worked.
The first piece plays through fine, and the next one starts up fine. About maybe 10 seconds in, the playing just stops.
Any help to solve this issue would be greatly appreciated, thanks!
Note: I am aware not all pieces will play after one other, I'm waiting until this issue is fixed before continuing.

How do I stop all currently playing MediaElement players?

I'm wondering how to stop all the MediaElement players currently in the DOM. I've tried this:
$('video,audio').each(function() {
$(this)[0].player.pause();
});
Let me know if that works.
A quick and dirty one, but neither work.
$(".mejs-play").live('click',function(){
$(".mejs-pause").trigger('click');
});
Tried to do my homework on this one but can't seem to find a response anymore.
Try this...
$('video, audio').each(function() {
$(this)[0].pause();
});
Here's a simple way to do a "stop all".
When first creating your MediaElement players, create them each explicity (as opposed to using $('video,audio').mediaelementplayer()):
var mediaElementPlayers = [];
$('video,audio').each(function(){
mediaElementPlayers.push(new MediaElementPlayer(this));
});
And then, when you want to stop them:
for (var i=0; i<mediaElementPlayers.length; i++){
mediaElementPlayers[i].pause(); // pause
if (mediaElementPlayers[i].getCurrentTime()){
mediaElementPlayers[i].setCurrentTime(0); // rewind
}
}
Very nice #Bart
And here is an addition to Barts function to stop audio in a certain context (within a certain element). Useful to stop media playing in a popup when it is closed for example:
function stopAudio(context) {
for (var i=0; i<mediaElementPlayers.length; i++){
if($(mediaElementPlayers[i].container).parents().find(context).length === 0) {
mediaElementPlayers[i].pause(); // pause
if (mediaElementPlayers[i].getCurrentTime()){
mediaElementPlayers[i].setCurrentTime(0); // rewind
}
}
}
}
Trigger the click event of pause button will work....check it here
$('.mejs-pause button').trigger("click");

Categories