Im currently having a function that animates a couple of cover arts from some random tracks. The problem I have is that the spotify cover arts lazy loads so the image sometimes doesn't appear since the load takes too long.
So, is there any way to preload the images before i start my animation? Or do i have to "play and stop" every track before my animation?
Handle the DOMNodeInsertedIntoDocument event.
$(image.node).on("DOMNodeInsertedIntoDocument", function onLoad(){ ... });
Related
One of my goals with learning dialogFlow and programmatic webhooks to handle intens and responses is to see if it's possible to create an audio rich quiz.
In this quiz there's a section where I would like to have multiple questions/responses with a continuous audio background playing at the same time. Is this possible or must the Google Assistant or Google Home Speaker be silent when waiting for user input?
Also, if it is possible with the above, is it also possible to make crossfades between audio backgrounds triggered by events of some kind? That is like a change of scenery without interruption/silence.
There are a number of approaches to this, depending on your exact needs and limitations you have. Not everything is completely possible, but you may be able to get close.
Dialog with Background Audio
The easiest way to do this would be to use Google's version of SSML with parallel elements using the <par> and <media> tags. (But be aware that these are non-standard tags, if you want to be able to use them elsewhere.) With this, you would have one "track" for the dialog and one for the audio. It might look something like this:
<speak><par>
<media xml:id="track-0" begin="0s" soundLevel="+0dB">
<audio src="https://actions.google.com/sounds/v1/crowds/crowd_talking.ogg" >crowd talking</audio>
</media>
<media xml:id="track-1" begin="0.75s" soundLevel="+0dB">
<seq>
<media>
<speak><p>Well, hello there</p></speak>
</media>
<media begin="2.0s">
<speak><p>How are you?</p></speak>
</media>
</seq>
</media>
</par></speak>
Is there an easy way to design this?
You might want to check out the Nightingale Visual SSML Editor which has also been released as an open source project. It can help get you started, but tweak the SSML yourself.
What about cross-fades?
Sure! Just indicate that you're fading one track out, and fading another in, starting at some offset to the end of the other track.
<speak><par>
<media xml:id="track-0" begin="0s" fadeOutDur="6s">
<audio src="https://actions.google.com/sounds/v1/alarms/digital_watch_alarm_long.ogg" >digital watch alarm long</audio>
</media>
<media xml:id="track-1" begin="track-0.end-6s" fadeInDur="6s">
<audio src="https://actions.google.com/sounds/v1/human_sounds/baby_cry_long.ogg" >baby cry long</audio>
</media>
</par></speak>
And I can have this playing while the microphone is open and listening to a user?
Well... no. Not with SSML.
If you think about this as a conversation with someone, we typically require audio cues to know when to speak. Asking a question and then giving quiet space to reply is an excellent way to do this. In person - we have other cues (we can see the other person pause, for example), but if we just have audio, we only have silence.
The Assistant works based on this sort of conversational model, so wants to make it clear to the user when it is their turn to speak.
You can argue that for some kinds of "conversations", it is normal to have a different audio cue that prompts the user. And you'd be correct. But the Assistant needs to be a general-purpose Assistant.
Then how can I do this?
Since you're making a quiz, you can use the Interactive Canvas to create a page with HTML and JavaScript. With this, you can use an <audio> tag or the MediaStream JavaScript API to create the background audio. With this, you can have the microphone open while this media still plays, but there isn't any event that lets you know when the mic is open so you can duck the audio, which is a bit of a downside.
This gets around the audio-cue issues because there are visual cues when the microphone is open.
You can also use the SSML <mark> tag to trigger events in your JavaScript so you know when the SSML from the server begins, ends, or hits other points in the audio stream.
If there are visual cues, can I use the Interactive Canvas on a smart speaker?
Well... no.
But what you can do is use runtime surface capabilities to determine if the Interactive Canvas is supported.
If it is - use it (possibly along with SSML).
If not, use the SSML method.
I have a .wav that I want to play when a person clicks on a link. How do I go about doing that? I'm not exactly an expert at html or css or javascript so be gentle with me
Reference
Playing audio with Javascript?
Example
Two Links
Play
Stop
jQuery click Events
$(document).ready(function(){
var audio;
$("a.playButton").click(function(){
console.log("playing");
audio = new Audio('http://download.wavetlan.com/SVV/Media/HTTP/WAV/Media- Convert/Media-Convert_test1_Alaw_Mono_VBR_8SS_16000Hz.wav');
audio.play();
});
$("a.stopButton").click(function(){
console.log("Pause");
audio.pause();
});
});
Now this probably isn't the most accurate way to do this but it gives you an idea of how this works. If you want to use the built in audio tag you can do that too cause that will give you the controls and other helpful things.
JSFIDDLE
https://jsfiddle.net/pzth1zd5/
[when I am on slow internet connectivity or images are of larger size comes from server and taking time to load]
Images taking time to load, so animation starts playing even if images are not loaded yet, to overcome this I have used preloader.
Now problem is audio I have used on this page loads early and starts playing even if page still showing preloader.
So it doesnt seem to work
Que1:
for images I have noticed until all assets are ready, edge min file attaches style
.edgeLoad-EDGE-137360589 { visibility:hidden; }
so for certain time it shows white screen as all other things it making hidden but animation runs in background, which doesnt look good.
Que2:
To resolve above issue, I tried preloader. By using it I can resolve above issue but it creates problem with audio.
Even if preloader is there, my audio starts playing in background.
[audio preload is set to false, but as and when it loads it starts playing not waiting for preloader to complete]
i have the loop playlist functionality working well with:
{
swfPath: "js",
supplied: "oga, mp3",
wmode: "window",
loop: "true",
});
however there is a few seconds gap between when the playlist finishes and then starts again.
the playlist only contains one file and so i am going for a 'seamless' sound effect but at the moment there is a gap between when the playlist ends and then starts again.
does anyone know if there is an option to remove this gap or somehow manage it so that it appears to have no gap?
thank you.
from the developer:
"Well, if you are only playing 1 piece of media, using the playlist is a verbose way of doing it... Introducing a number of effects that would not normally be there. The delay is due to the playlist assuming that the next track is different to the previous track... So it always sets the media again each time and this will be the source of the delay.
Do it more like a single player and the delay will be much smaller. There will always be a small delay, but much better than you are experiencing.
For example, this demo here is better suited:
http://jplayer.org/latest/demo-01/"
I may not be using the proper terminology but hopefully I get my question across properly. What I'm wondering is if it's possible to "delay" the "creation" of a specific div, rather than just delay the FadeTo or Show jquery command.
I ask because I'm using the Vimeo API which is completely mind-boggling and frustrating (at least for me - it's a source of endless shame and I wallow in self-pity when attempting any such Vimeo API coding). What I'm trying to do is just delay the autoplay of the iframe code for an embedded Vimeo video. The problem is that I have the div containing the vimeo iframe set to hide for a good three seconds after the page loads before it fades in, but since it's just hidden the video starts playing anyway before the visitor can actually see it. I'm just using &autoplay=1 for the vimeo embed...
So, I suppose the only other solution besides getting this confusing Vimeo API to try to delay the video that way is to be able to just use a jQuery command to delay the vimeo iframe from even loading/being created on the page, until the container div fades in.
If this is possible I will bless my lucky charms. And double points if someone answers in the next few hours! Thanks so much!!!
I just editted my answer and applied it to fit your code you provided:
So what I did here is: 1) load jquery into your page2)when jquery sees your div with id="div" as 'ready', it will fire an alert that says loaded (you can remove this it was just for testing purposes), and then delay the src from loading in your iframe for 2 seconds (2000 miliseconds)
3) So you can change the 2000 to whatever time you want, and make sure the "player_1" matches your iframes id
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document.getElementById('div')).ready(function()
{
alert('loaded');
setTimeout('document.getElementById("player_1").src="http://www.youtube.com/v/82CYNj7noic?autoplay=1"', 2000);
});
</script>
<div id="div" class="div">
<iframe class="iframe" id="player_1" > </iframe>
</div>
Does this work for you?? I hope I've helped!!