We Keep Coding

Is there a way to see the progress of an audio download in Howler.js?

I'm using howler.js to play audio on my website, but because I am downloading audio through direct links there are differing load times depending on the length of the audio. I was wondering if there was a way to see how much of the file has been downloaded and display it to the user so that they know an approximate time it would take for it to finish loading. An example of how I am downloading audio is shown below.
lvlHowlWEB[eps] = new Howl({
src:["https://dl.dropboxusercontent.com/s/hb7gw9zqvdptdzq/Potat2k18.mp3?dl=0"],
html5: false,
});
(Note: Audio will not begin playback until after it has loaded completely. I am just looking to see if there's a way to view how much longer it will take to be completely downloaded)
Any help would be appreciated!

You could consider using a ServiceWorker to intercept the HTTP requests and show progress updates as they download. https://fetch-progress.anthum.com/
Alternatively, you could use fetch() and show download progress, then convert the downloaded data into a Blob for URL.createObjectURL(), which could then be used for Howler's src property.

How to stream live TS (transport stream) files on HTML player?

I want to stream a transport stream file on a HTML player. Is there a way to implement it?
I have tried these following approaches to play the TS file-
a) Put it in a video tag:
I simply wrote a video tag
But it showed me a blank screen.
b) I tried it with iframe tag:
I wrote a simple tag:
It actually downloaded the file but screen turned blank.
c) I used HLS player for showing the ts file
The HLS (hls.js) validated the file. However it gave me the "manifestLoadError".
Can anyone helpe me with this HLS error?
Or suggest me another way to show this TS file?

Browsers can not play ts. You need to convert to iso/fmp4 before playing.

Streaming a video file from firebase storage using Javascript

I have worked with images, they seem to do well when you use the downloadURL() to embed them in html tags,but the video doesn't work.
I tried using the video and iframe tag in html but it doesn't work. From what I understand, is that incoming file is not a video but a general file, it downloads with ".mp4 extension. Please suggest what should I do. I am working on a small time project where users can upload videos and watch other user's video.

Use downloaded Url to play video in chat.
In this code, i have passed a video URI to which I want to get the downloadable URL and then set the source of the video element.
Note:- Remember to put the controls property to video tag.
this.storage.refFromURL(videoUri).getMetadata().then(function(metadata) {
console.log('metadata',metadata.downloadURLs[0]);
vidElement.src = metadata.downloadURLs[0];
});

How can I test file downloads with Behat 3 when using FileSaver.js?

I'm developing some Behat 3 (with Selenium 2) tests for a site that uses FileSaver.js to convert some DOM elements into an XML file for download. (I can't change that bit, so don't ask.)
When I click a button, JavaScript fires that passes the data blob into FileSaver.js, which converts that to an actual file and activates your browser's usual file download dialog. From there, the user clicks ok and says where to save the file.
I would like to test this process, but I can't figure out how to actually click that OK button or select where to save the file.
I'm fairly new to Behat, but the closest I could find to this is another SO question that deals with a file download (How to test file download in Behat), but because this blob file is created on the fly, I can't just use Guzzle to pull the file from the server.
Any suggestions?

How to save an image converted from a canvas, on the computer, in a user-friendly manner?

I'm using Nihilogic's library Canvas2Image to convert canvas drawings to PNG, and to give the users of my application the possibility to download that image.
What I need is to be able to give the downloadable file a name and the png extension (e.g. "goalboard.png") and not have it download just as an octet stream with no recognizable extension and the name "download", because the average Joe won't know what to do with such a file. And I need to do this on the client-side, because sending that byte stream to the server, depending on the quantity of data in it, can take up to 20 seconds (it's a big canvas!). Not to mention retrieving the image afterward...
So, how do I do this?

One of these should solve your problem (with canvas you can extract the image in base64 format):
Using HTML5/Javascript to generate and save a file
Reading a local file, encoding to base64, I would like to give the user an option to save the result to file

I had a big RaphaelJs canvas too and needed to allow the user to run a script that would save lots of canvas as png images.
I tried to transform my raphael into an svn, then my svg to a png and then using wget but that of course didn't work because my canvas where generated by javascript and wget can't deal with that. In the end I realised that I could just have my webapp to build a page with just the svg canvas and use phantomjs ( a headless browser) to save it as a png. It works briliantly.
It is as simple as that.
1. Make your webapp to build a page with just the svg canvas.
2. Create a svgToPgn.js file with the following code :
var page = require('webpage').create();
page.open('URL_TO_YOUR_HTML_PAGE', function() {
page.render('PATH_TO_PNG/example.png');
phantom.exit();
});
3. Download Phantom (http://phantomjs.org), unzip it and in the bin directory you will find the phantomjs executable. Run :
./phantomjs svgToPgn.js
Your png file will be saved in : PATH_TO_PNG/example.png

And I need to do this on the client-side
Well that requirement kind of kills your chances. Sorry.
You can't do what you want to do, the best you've got is displaying the image and telling the user to right-click save-as.