We Keep Coding

browser doesn't show progress bar when downloading a file using javascript

browser doesn't show progress bar when downloading a file
function getSound(sound) {
var req = new XMLHttpRequest();
req.open("GET", sound, true);
req.responseType = "blob";
req.onload = function (event) {
var blob = req.response;//if you have the fileName header available
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download='sound.mp3';
link.click();
};
req.send();
}
I want show like this

The issue is that by the time you call 'click' the file is already downloaded. But you didn't need to download the file in advance:
function getSound(sound) {
const link=document.createElement('a');
link.href=sound;
link.download='sound.mp3';
link.click();
}

You have to add Content-Lenght header to let the web browser know the size of your file.

Detecting WebAudio sound end

I'm using a javascript build a radio and I'm trying to give it different functionalities but I need to be able to detect the end of a song to make it work. Is there any way to do this?
I've tried different methods I've found online like .ended and such but I don't think those work without using the html audio tag. So I tried to make an audio tag that uses the same data for the source that my js radio uses and get the file length to stop my sourceNode at the end time and make a new one but but i keep getting null returned as the data so that doesn't work either.
I want to do something like:
context.onended = function() {
$.ajax({
url: '../scripts/radio.php',
data: {
attr1: 'value1'
},
success: function(data) {
console.log(data);
fileChosen = true;
setupAudioNodes();
var request = new XMLHttpRequest();
request.addEventListener("progress", updateProgress);
request.addEventListener("load", transferComplete);
request.addEventListener("error", transferFailed);
request.addEventListener("abort", transferCanceled);
request.open('GET', data, true);
request.responseType = 'arraybuffer';
// When loaded decode the data
request.onload = function() {
$("#title").html("Title");
$("#album").html("Goes");
$("#artist").html("Here");
onWindowResize();
$("#title, #artist, #album").css("visibility", "visible");
// decode the data
context.decodeAudioData(request.response, function(buffer) {
// when the audio is decoded play the sound
sourceNode.buffer = buffer;
sourceNode.start(0);
$("#freq, body").addClass("animateHue");
//on error
}, function(e) {
console.log(e);
});
};
request.send();
}
});
I want for this to run at the end of a song and play the next file. Which it would work if I could get the end time of the currently playing song.

To fix the above issue I added the .ended event inside the function that the source was set up:
function setupAudioNodes() {
// setup a analyser
analyser = context.createAnalyser();
// create a buffer source node
sourceNode = context.createBufferSource();
//connect source to analyser as link
sourceNode.connect(analyser);
// and connect source to destination
sourceNode.connect(context.destination);
//start updating
rafID = window.requestAnimationFrame(updateVisualization);
//I had to place a function for the .ended event inside the function sourceNode was set up.
sourceNode.onended = function() {
sourceNode.stop(0);
playFirst();
}
}

URL.createObjectURL(blob) not creating proper URL in IE 11

I'm trying to render a pdf inside an iframe. It is working fine on Mozilla (v54) and Chrome (v59) but nothing happens in IE(v11) when I click on the link which loads the PDF. After debugging several times I found that the URL in Chrome/Firefox is blob:http://localhost:37444/5a8e7fed-cd61-4c58-904c-fad2ae169718 and in IE(v11) it is blob:B7395CB5-169D-471F-BB8F-AA90EAFB6DDB. Why is URL.createObjectURL(blob) not appending the http request in IE(v11)
function (iframe, url, headers) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = handler;
xhr.responseType = "arraybuffer";
headers.forEach(function (header) {
xhr.setRequestHeader(header[0], header[1]);
});
xhr.send();
function handler() {
if (this.readyState === this.DONE) {
if (this.status === 200) {
var blob = new Blob([xhr.response], { type: "application/pdf" });
var objectUrl = URL.createObjectURL(blob);
iframe.src = objectUrl;
} else {
console.error('XHR failed', this);
}
}
}

IE does not create a url for these blob objects because of security reasons i think.So using var objectUrl = URL.createObjectURL(blob);will not give you the source url which you can use inside iframe or embed tag.
I faced the same issue and searched a lot about the fix.But could not get the answer.Instead i solved it as following.
you can use the following for IE
if (bowser.msie && window.navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(file, fileName);
}else{
//do what you were doing for other than IE
}
the above IE code will prompt the user that whether he wants to save the file or directly open it.
User can click on button 'open' and then IE will show the PDF without downloading it in default reader.

Storing Image In Database Without JQuery

Good day stackers,
I'm working on a web project in which we recreate a social media site similar to snapchat. I'm using my webcam to take pictures using JS, and I'm writing the picture to a var called img as follows:
var img = canvas.toDataURL("image/png");
We are required to use PDO in PHP to access the database. Alternatively we can use AJAX, but JQuery is strictly forbidden. My question is, how can I store the DataURL inside my database? All the tutorials online use JQuery.
Update:
I followed the steps as suggested below, but when I hit the snap button, it still only takes the picture, but no URL or nothing.
function sendimagetourl(image)
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
alert( this.resoponseText);
}
}
xhtp.open("GET", "saveimage.php?url="+image, true);
xhttp.send();
}
//Stream Video
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
{
navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
});
}
//Snap Photo
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 800, 600);var image = canvas.toDataURL("image/png"); sendimagetourl(image);});
So it appears I was a bit of a fool. There were two minor typos, and it seems like the data sent is invisible in the url. Thanks for all the help!

You can use javascript ajax
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert( this.responseText);
}
};
xhttp.open("GET", "saveimage.php?url="+url, true);
xhttp.send();

You can use XMLHttpRequest() or fetch(), Blob, FormData to POST data URI to php. See also Using files from web applications
var request = new XMLHttpRequest();
request.open("POST", "/path/to/server", true);
request.onload = function() {
// do stuff
}
var data = new FormData();
data.append("image", new Blob([img], {type:"image/png"}), "filename");
request.send(data);

Load sound (XMLHttpRequest) and show play controls (html5 audio player)

I need to add html5 web audio player (with controls on html page) for loaded mp3 song to browser.
How a can do it?
function loadSound(url) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
// When loaded decode the data
request.onload = function() {
// decode the data
context.decodeAudioData(request.response, function(buffer) {
// when the audio is decoded play the sound
if (request.response) {
}
playSound(buffer);
}, onError);
}
request.send();
}
loadSound("hello.mp3");
function playSound(buffer) {
sourceNode.buffer = buffer;
sourceNode.start(0);
}