In AngularJs 1, when using the ngAudio service, and playing audio like this :
$scope.audio = ngAudio.load("abc.wav");
$scope.audio.play();
After the sound is played, a click on the screen stops it.
Why is that, and how can I change it ?
I'll appreciate your answers. Thanks
Try running ngAudio.setUnlock( false ); on the ngAudio service.
The culprit is on line 147 of angular.audio.js.
Related
I'm building an internal tool where my team members need to copy some value from PDF into an input field. So I'm loading the pdf beside the input field using an iframe like this :
<iframe style={{width:"40vw", height:"100vh"}} src=""https://drive.google.com/file/d/1Q_0Jj3ba85sTBHir4F0BKJ2WurjYnCBg/preview""
frameBorder="0"
/>
CTRL + C doesn't work. So copy value using right click. When I click the copy button and try pasting in the input field, the entire screen freezes. Even just by copying everything freezes.
Why is this happening? How can someone fix this?
Maybe problem not with code because in example all works fine without any freezes
https://codesandbox.io/s/trusting-glitter-5ghgqu?file=/src/App.js
If you want to hotkeys work, you should pass listener to iframe
window.myIframe = document.getElementById("iframe id").contentWindow;
window.addEventListener("keydown", function(evt) {
myIframe.myKeydownEventHandler(evt);
});
strange behavior with fuse cursor. I've set fuse false for cursor both mainscene and a-cursor, but fuse still appears on hover.
This problems is apeearing when testing on ios, android. From desktop browser working fine.
<a-camera id="default_angle" camera position="0 0 0" look-controls wasd-controls>
<a-cursor>
<!-- by default click should be not expected on hover object (fuse) -->
</a-cursor>
</a-camera>
...
<a-box id="motor" color="red" position="0 0 -5"></a-box>
<!-- on hover to this object from mobile fuse should not appear -->
...
var motor = document.querySelector('#motor');
motor.addEventListener('click', function (evt) {
alert('clicked');
});
Please checkout this codepen
https://codepen.io/sevenspring/pen/XWWzNvK
Here may be thought, that clicks produced by touch (tap on mobile screen) while cursor is hovered on object.
but you may check this example with gyro.
https://parent.glitch.me
in vr mode we can hover cursor on button "play/pause" by gyroscop moving, it still will produce clicks.
https://glitch.com/edit/#!/join/d1afa869-dea2-47ec-9904-e851e451d832
Answer from Dan S. is correct.
When we use without attribute "cursor" , fusing event is not fired, as it is expected by default
There are actually a number of issues here.
One issue is that the CodePen demo is using <a-cursor fuse="false" cursor></a-cursor>. This is essentially two cursors as you're adding a second one as a component via cursor that hasn't been configured.
Another issue is that cursor fuses by default on mobile if not explicitly set to cursor="fuse: false;"
Another issue is that you're listening for the click event, which is capturing the click when you mouseup after hovering over the entity.
I believe fuse was designed to allow for click without clicking, but while also allowing users to click if they have the ability.
If you want to test when something is fusing exclusively, you may want to try listening for the fusing event rather than click.
<a-cursor fuse="false"><a-cursor>
Or
<a-entity cursor="fuse: false;">
<!-- you will need to provide your own cursor geometry -->
<a-entity>
Then listen for fusing:
this.el.addEventListener('fusing', function (e) {
console.log(e);
});
I hope this helps.
I'm currently playing around with a VR environment for Google cardboard, using React and A-Frame and have a bug that I cannot fix.
I'm using a fuse-type cursor that will fire off a click event upon gazing at a target for more than 1.5 seconds. It's supposed to fire off once, but for some reason it will fire off multiple times.
You can check out the app on the browser at https://vr-museum.herokuapp.com
The code for the cursor:
<Camera position={this.state.cameraPos} >
<Cursor fuse="true" max-distance="10" timeout="1500" color="red"/>
</Camera>
Any insight as to what may be going on will be greatly appreciated.
Thank you.
This has changed to fuse-timeout="1500". I will update docs shortly.
I just started learning AngularJS and am facing an issue with audio playing. Here is part of my controller's code :
$scope.preview=function(id){
searchRequest.getSound(id).get().then(function(response){
var audio = $("#player");
$scope.link=response.data.preview;
audio[0].pause();
audio[0].load();
audio[0].oncanplaythrough = audio[0].play();
});
}
And HTML :
<audio controls id="player">
<source ng-src='{{link | trustUrl}}' type="audio/mp3">
</audio>
It is actually supposed to set the new song's url every time I click on a different item and play it (I am not sure designing it the right way according to Angular, as I told you I just began). When I click for the first time on a song, the data binding has been well done and the source url has been modified but the song doesn't get played. Then when I choose another item, it still sets the right url to the source but plays the previous one every time. Basically I need to click 2 times on a song to make it read.
Do you know how I could fix it ?
Thank you
$scope.preview=function(id){
searchRequest.getSound(id).get().then(function(response){
var audio = $("#player");
$scope.link=response.data.preview;
audio[0].src = response.data.preview;
audio[0].pause();
audio[0].load();
audio[0].oncanplaythrough = audio[0].play();
});
}
should work as expected
The page loads without any of the images displaying on IE11 only, but refreshes them accordingly when we resize the browser intermittently (1/3 loads). We cannot replicate this with any of the other browsers. srcset works fine by itself with static content.
Here is a Plunker example of it not working in IE11.
Or quick and easy, the actual img html we're using:
<img data-ng-srcset="{{::image.url}}, {{::image.url2x}}" alt="{{::image.name}}"/>
The images or surrounding divs do not have any transitions, shadows or opacity applied.
The html renders fine with angular passing over and rewriting the srcset attribute correctly. The images just do not appear, only the alt tag. Wondering if this could be a call stack issue due to the intermittence of it, maybe a race condition with Picturefill loading before angular finishes a digest or something.
Cheers in advance!
A work around if you use PictureFill in a loop and in a specific case (not on all images of your application), is calling a function that launch PictureFill directly from HTML, after last item loaded (this is not the best practice but fix the IE11 problem) :
<picture><!-- Your image --></picture>
<span ng-if="$last">
{{ controllerAlias.launchPictureFill() }}
</span>
Came across this as a solution: http://tech.endeepak.com/blog/2014/05/03/waiting-for-angularjs-digest-cycle/
var waitForRenderAndDoSomething = function() {
if($http.pendingRequests.length > 0) {
$timeout(waitForRenderAndDoSomething); // Wait for all templates to be loaded
} else {
$window.picturefill();
}
}
$timeout(waitForRenderAndDoSomething);
The only issue that the blog post describes is here, so if anyone has anything better please let me know:
The $http.pendingRequests supposed to be used for debugging purpose only. If angular team decides to remove this, you can implement the same using http interceptors as suggested in this link.