Hi i am calling two different web services from my angular script. First service is returning text which i am using as an input to second text to audio service. Since in some case text is long string and it takes time to load the audio file, but meanwhile text output prints on screen. My requirement is to print the text output on screen when audio playback is available. I am using html 5 tag for audio playback. Please let me know if there is any other way to do the same.
You need to add an event listener to the 'canplaythrough' event on the audio element. Register a callback which displays the current text and plays the audio once this is the case.
There isn't actually an event available which fires when media has loaded completely; canplaythrough is just an estimate by the browser that it will play without interruptions bases on the amount that is buffered and the current download speed. This isn't exactly foolproof but it's the best option available.
Related
I spend time in a lot of twitch channels for networking and viewing multiple streams at once. I'd like to have the ability to quickly change the volume without having to click every single one.
I've begun by attempting to access the video tag via javascript with the following, but I keep getting "undefined" in console.
var vid = document.querySelectorAll('video');
Eventually I planned to use the volume function/property of the object to adjust the volume, or the mute function, but I'm stuck on trying to select the object.
Tracking mouse movement/scroll/click events is easy but how do they save the screen and keep it in sync so well?
The pages are rendered very quite well (at least for static HTML pages, haven't tested on Angular or any SPA), the sync is almost perfect.
To generate and upload a 23fps recording of my screen (1920x1080) it would take about 2Mbps of bandwidth. Maybe when recording only when there are some mouse events it would still take some 300-500Kbps on average? That seems way too much...
HTML content and DOM changes get pumped through a websocket and stored by Hotjar (minus sensitive information such as form inputs from the user, unless you've whitelisted them), the CSS isn't stored (it gets loaded by you when you watch the recording).
Because they're only recording user activity and DOM changes, there's a lot less data to record than if they were capturing a full video. The downside is that some Javascript driven widgets won't function correctly in the replay.
Relevant information from Hotjar docs:
When it comes to recordings, changes to the page are captured using the MutationObserver API which is built-in into every modern browser.
This makes it efficient since the change itself is already happening
on the page and the browser MutationObserver API allows us to record
this change which we then parse and also send through the websocket.
At regular short intervals, every 100ms or 10 times per second, the cursor position and scroll position are recorded. Clicks are recorded
when they happen, capturing the position of the cursor relative to the
element being clicked. These are functions which in no way hinder a
user's experience as they only capture the location of the pointer
when a click happens or every 100ms. The events are sent to the Hotjar
servers through frames within the websocket, which is more efficient
than sending XHR requests at regular intervals.
Source: https://help.hotjar.com/hc/en-us/articles/115009335727-Will-Hotjar-Slow-Down-My-Site-
I have this in page:
<video src="blob://some-live-stream" autoplay></video>
<div id="hideMePlease"> hide 1 sec before video ends</div>
I would like to hide the div 1 sec before the video ends, how can i do?
N.B: i can't know video duration, it's a live stream , and the video autostops so i have no way to stop it myself.
If, as you state, you cannot know the length of the video because it's streaming, it will be impossible (relativistic time travel notwithstanding) for you to schedule an event one second before it finishes.
However, I would at least first try to use the duration property of the video, it may be that metadata is made available as part of the stream early on. If it is, you can use that to schedule the hiding of your div.
As an aside, if you visit the page http://www.w3.org/2010/05/video/mediaevents.html, you'll find that the duration is set correctly as soon as you start playing the video, despite the fact it seems to be streaming from either an MP4, OGG or WEBM file). So it's at least possible, though it may depend on the data stream itself (whether the metadata comes before or after the actual video data).
If the data is not available (I think you get Inf for the duration in that case), then you're just going to have to hide the div at the earliest possible time after that.
That would presumably be when it finishes (fires the onended event).
So, in short, if you can get the duration (or periodically get the time remaining which might be better), use that. Otherwise fall back to hiding it at the end and start hassling w3c to provide the functionality you want in HTML6.
There is a web page which has HTML5 video in it. When the user clicked start or when he navigates through the timeline, the video starts (either from start or from the position he selected). But it does not always happens instantly. I wanted to find how much time did it took from the user click event and the time the user received first bytes of the video.
Getting time of userclick is not a problem, but while looking through HTML5 video API here and I was not able to find any event which is close to what I am looking for.
Is it possible to tack such event?
The event(s) you listen for after you receive the click (or "play" or "seeking") event depends on the state of the video before the time of the click.
If you have a fresh, unplayed video element with the preload attribute set to "none", then the first data you're going to receive from the network is the metadata. so you can listen for the "loadedmetadata" event.
If preload is set to "metadata", you might have already loaded metadata, depending on the browser and platform. (e.g., Safari on iPad will not load metadata or anything else until the first user interaction.) In that case, you want to listen for either "loadedmetadata" or "progress". It couldn't hurt to listen for "loadeddata" as well, but I think "progress" fires first.
If preload is set to "auto" or if you've already played some of the video, you might have some actual video data. And while you're likely to have data at the current point on the timeline, you may or may not have it at the seek destination. It depends at least on how far ahead (or behind) you're seeking, how fast data is coming in and how much spare room the browser has in the media cache.
If there is no data at the destination time (you can check this in advance if you want with the .buffered property, see TimeRanges), then the next event you see will be either "loadeddata" or "progress", probably followed by "canplay". If there is enough data buffered at the target time of the seek, then the question doesn't really apply because nothing else will be transferred.
However, in any of the above cases, once there is enough data to display the frame at the new point on that timeline and that data has been decoded, the "seeked" event will fire. So if you were to only pick one (no reason you can't use more), this is the one to pick.
In my project, I need to embed audio (ex: mp3, etc) into a web page. When user visits the page, the audio will begin playing. When the audio ends, the questionnaire (form fields) will appear for the user to answer.
Is there is way to check if the audio has finished playing using jquery, so that the questionnaire can appear after the user has listened to the entire audio?
I know one way to check is to determine the audio length, then I can set a timer to display the questionnaire, but I'm hoping jquery has some sort of event handler that allows me to accomplish this.
I see that jquery has many audio plugins, and I can't be sure which will do what I want here: http://plugins.jquery.com/plugin-tags/audio
Any ideas are greatly appreciated.
Thanks.
If you are using the html5 audio tag, there is the "onended" event handler. I don´t know if the browsers support it yet.
Something like:
<audio src="xpto.mp3" onended="DoSomething();"></audio>
In the last case you can use a swf that can play the sound, and alert your javascript when it reaches the end.
You can also add a jQuery event listener like so:
$("audio").on("ended", function() {
console.log("All Done!");
});
Using JavaScript event listener.
var myAudio = document.getElementById("myAudioId");
myAudio.addEventListener("ended", function() {
alert("The audio has ended.");
};