Develop Reference

aframe mobile <a-video> fully working but <a-sound> not working

this is a additional question to a (solved) question I had here
I have managed to get video for my project working on mobile & desktop using the component from this glitch project
init: function () {
this.onClick = this.onClick.bind(this);
},
play: function () {
window.addEventListener('click', this.onClick);
},
pause: function () {
window.removeEventListener('click', this.onClick);
},
onClick: function (evt) {
var videoEl = this.el.getAttribute('material').src;
if (!videoEl) { return; }
this.el.object3D.visible = true;
videoEl.play();
}
});
however, on mobile devices, a separate component to play sound from an entity is not working (it works on chrome and safari)
init: function () {
this.onClick = this.onClick.bind(this);
},
play: function () {
window.addEventListener('click', this.onClick);
},
pause: function () {
window.removeEventListener('click', this.onClick);
},
onClick: function (evt) {
let entity = document.querySelectorAll('[sound]');
for (let item of entity) {
item.components.sound.playSound();
}
}
});
I am really confused, I have tried a few separate solutions but nothing seems to be working.
The only time I can get audio to play on mobile is by using this component however it is unsuitable as it only plays audio when the individual objects/entities are clicked, and I need all my sounds to play at once, by a click on the document window.
any help would be appreciated !!
EDIT
here is a code snippet of my project to show issue
UPDATE
I have managed to get the component working on mobile but now spatial sound is broken:
JS:
AFRAME.registerComponent('singleton-sound', {
schema: {
src: {type: 'string'},
autoplay: {default: false},
distanceModel: {default: 'inverse', oneOf: ['linear', 'inverse', 'exponential']},
loop: {default: false},
maxDistance: {default: 10000},
on: {default: ''},
poolSize: {default: 1},
positional: {default: true},
refDistance: {default: 1},
rolloffFactor: {default: 1},
volume: {default: 1}
},
multiple: true,
init: function () {
var audio = document.querySelector(this.data.src);
window.addEventListener('click', playIfFree);
// window.addEventListener('mouseenter', playIfFree);
audio.addEventListener('ended', function () {
window.isPlaying = true
})
function playIfFree () {
if(!window.isPlaying) {
audio.play();
window.isPlaying = false
} else {
return false
}
}
}
});
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector('#overlay').style.display = 'flex';
document.querySelector('#overlay').addEventListener('click', function () {
let sounds = document.querySelectorAll('audio');
sounds.forEach (function (sound) {
sound.play();
sound.pause();
})
this.style.display = 'none';
})
});
HTML
<a-entity
gltf-model="#alice"
navigate-on-click="url: alice.html"
singleton-sound="
src: #aliceaudio;
volume: 1;
distanceModel: inverse;
rolloffFactor: 2"
position="-0.06 1.5 11.594"
rotation="90 180 0"
scale="0.4 0.4 0.4"
foo
></a-entity>

How to change default value with click function?

function navigation() {
var navigation = {
value:1
};
return navigation.value;
$( '#cookie_outside').click( function() {
var navigation = {
value:0
};
return navigation.value;
});
$( '#cookie_inside' ).click( function() {
var navigation = {
value:1
};
return navigation.value;
});
}
swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
parallax: false,
initialSlide: navigation(),
grabCursor: true,
resistanceRatio: .00000000000001
});
How can i change default value with click function. "initialSlide: navigation()".
My default value is 1, i want it change when i clicked #cookie_inside or #cookie_outside.
It can be possible instant change?

Your event binding is never triggered due to return statement and another reason is the binding of event must be done outside your function. On your ready function do call setup
function navigation() {
var navigation = {
value:1
};
return navigation.value;
}
function setup()
{
$( '#cookie_outside').click( function() {
var navigation = {
value:0
};
return navigation.value;
});
$( '#cookie_inside' ).click( function() {
var navigation = {
value:1
};
return navigation.value;
});
}
$(document).ready(function(){
//set it up
setup();
});

Javascript functions in custom namespaces

It is possible to declare 2 more functions in main function like this ?
var jquery4u = {
init: function() {
jquery4u.countdown.show();
},
countdown: function() {
show: function() {
console.log('show');
},
hide: function() {
console.log('hide');
}
}
}
jquery4u.init();
and i receive the following error: Uncaught SyntaxError: Unexpected token ( on this line "show: function() {"

Remove the function from the right of the countdown (demo)
var jquery4u = {
init: function() {
jquery4u.countdown.show();
},
countdown: {
show: function() {
console.log('show');
},
hide: function() {
console.log('hide');
}
}
}
jquery4u.init();
Next time, use jsFiddle to make a demo and click the "JSHint" button.

Actually, none of this will work. Unless you make countdown an object or you treat its sub-functions as proper functions.
Why: Under countdown, you created an instance of object not a function.
var jquery4u = {
countdown: function() {
show = function() {
console.log('show');
}
hide = function() {
console.log('hide');
}
jquery4u.countdown.show();
}
}
The above code is a valid code so it is possible. Unfortunately it will not return anything.
The proper way to do this is in this format:
var jquery4u = {
countdown: {
show: function() {
console.log('show');
},
hide: function() {
console.log('hide');
}
}
}
This will work. You can try it out by calling:
jquery4u.countdown.show();

clear/set interval on hover jquery

I am togglefading two iframes and want it to stop fading on hover. The following code is not clearing the interval.
function mapfade(){
$('#earth').fadeIn(1000).delay(3000).fadeOut(1000).delay(3000).fadeIn(1500);}
var fadestop=setInterval(function(){ mapfade () }, 3000);
$('iframe').hover(
function() {
clearInterval(fadestop);
}, function() {
fadestop=setInterval(function(){ mapfade () }, 2000);
}
);
Help is much appreciated!
Changed glaring error in code to
function mapfade(){
$('#earth').fadeToggle(2000)}
var fadestop=setInterval(function(){ mapfade () }, 3000);
$('iframe').hover(
function() {
clearInterval(fadestop);
}, function() {
fadestop=setInterval(function(){ mapfade () }, 3000);
}
);

flowplayer ipad stop looping

I'm having trouble with Flowplayer. I get the videos to run and everything on the iOS devices, however once the video ends it immediately starts playing again. or it'll drop the video, but the audio loops again. It's almost as if continuousPlay is set to true.
here's the code I'm working with. Let me know if I've done something odd, or am just forgetting to add something that will get the video to stop when it should. Any help would be greatly appreciated.
the HTML code:
<div style="display: block; width: 640px; height: 360px; margin: 0 auto;" id="player1">
</div>
The script code:
flowplayer("player1", { src: "/flowplayer/flowplayer.swf", wmode: "direct" }, {
plugins: { controls: null }
, clip: { url: 'Videos/vid.mp4'
, autoPlay: true
, autoBuffering: true
, bufferLength: 7
, accelerated: true
, continuousPlay: false
, loop: false
, onBeforePause: function () { return false; }
, onBeforeSeek: function () { return false; }
, onBeforeStop: function () { return false; }
, onBeforeFinish: function () { ShowNextButton(); }
}
, onLoad: function () { this.setVolume(80); }
, onFinish: function () { ShowNextButton(); }
, onKeyPress: function () { return false; }
}).ipad();
function ShowNextButton() {
$f().onBeforeClick(function () { return false; });
$f().hide();
var nextButton = document.getElementById('ctl00_ContentPlaceHolder2_btnNext');
nextButton.style.cursor = 'pointer';
nextButton.style.display = 'inline';
nextButton.style.visibility = 'visible';
}