How can i load an mp3 file to a react URL - javascript

I've been trying to add a .mp3 file being loaded by Input on a URL, so i can play it using my player, but i cant load it as URL
I tried using FileReader with readAsDataURL, but i dont get URL for the file
I have this input
<input id="auInput" type="file" accept="audio/*" onChange={e => readURL(e)}/>
and the reader function:
function readURL(input) {
if(input.target.files && input.target.files[0]){
let reader = new FileReader();
reader.onloadend = function(e){
let audio = new Audio(e.target.result);
};
reader.readAsDataURL(input.target.files[0]);
// This is where i need the URL to add it to player:
sourceAux = reader.result;
}
I expect a URL and im just getting an empty string

I've found an answer, by using this
function readURL(input){
sourceAux = URL.createObjectURL(input.target.fles[0]);
console.log(sourceAux);
let audio = new Audio(sourceAux);
}

Related

audio to base64 using javascript

I have an audio Link:
var au='https://firebasestorage.googleapis.com/v0/b/test-46a7f.appspot.com/o/Audio.mp3?alt=media&token=a4fa9b18-ab70-4bbc-8ae1-21639d411035';
I need to convert the audio to base64, because its play on mobile devices with a very big delay.
Please see working plunkr https://plnkr.co/edit/PFfebmnqH0eQR9I92v0G?p=preview, Its in Angular 2
Core Logic is JS method :
HTML
<input type="file" id="filePicker" (change)="handleFileSelect($event)">
JavaScript:
handleFileSelect(evt){
var files = evt.target.files;
var file = files[0];
if (files && file) {
var reader = new FileReader();
reader.onload =this._handleReaderLoaded.bind(this);
reader.readAsBinaryString(file);
}
}
_handleReaderLoaded(readerEvt) {
var binaryString = readerEvt.target.result;
this.base64textString= btoa(binaryString);
console.log(btoa(binaryString));
}

Import external html file with image

Here is my html code:
<input id="file" type="file">
<div id="preview">Preview</div>
and JavaScript Codes:
function handleFileSelect(evt) {
var file = evt.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('preview').innerHTML = e.target.result;
};
reader.readAsText(file);
};
document.getElementById('file').addEventListener('change',handleFileSelect, false);
fiddle : https://jsfiddle.net/8te1hyv9/4/
I am trying to load an external html file from my local drive into the div id preview. Its Working fine only with image src url are on server..
How to display the image from local drive into the preview.Is this possible to convert the image url to base 64 when importing the html file.

HTML5 FileReader, read from local file

I want to read a local binary file. So, I do this
var file = new File([""], url);
var reader = new FileReader();
reader.onload = function () {
parse(reader.result);
}
reader.readAsArrayBuffer(file);
where url is a filepath like url="c:\temp\myfile.bin"
I don't have any errors, but something is wrong, because all data from my app disappear. What could be wrong ? Any ideas ?
Thanks!
I guess you have to use input type="file" for security reasons.
Here's a working example. For convenience it shows the opened file in the same browser window.
<html>
<body>
<script>
function readFile() {
var reader = new FileReader();
file = document.getElementById("uploadText").files[0];
reader.onload = function (ev) {
document.getElementById("obj").data = ev.target.result;
// parse(ev.target.result);
};
reader.readAsDataURL(file);
// reader.readAsArrayBuffer(file);
};
</script>
<div>
<input id="uploadText" type="file" onchange="readFile();" />
</div>
<object id="obj" data="" />
</body>
</html>

FileReader readAsBinaryString() to Image DOM Element

If have an input type file
<input id="file" type="file" name="file" />
and an Image
<img id="img">
If a file is selected I want to read Exif data from the image an load it into the img tag.
var $inputFile = $("#file");
$inputFile.on("change", function() {
var img = document.getElementById("img");
var files = $inputFile[0].files;
var reader = new FileReader()
reader.onload = function(event) {
var file = reader.result;
// this is not working
img.src = file;
var binaryString = reader.result;
var oFile = new BinaryFile(binaryString, 0, file.size);
var exif = EXIF.readFromBinaryFile(oFile);
// read exif data
}
reader.readAsBinaryString(files[0]);
});
The problem is that I did not get any image on the screen. It only shows up if I use reader.readAsDataURL(files[0]); but this I cannot use because I need the binaryString for the Exif data.
How do I get the image tag to show the selected file which is a binary string?
to show an image in "binary" form, you need to have it as a base62 encoded string, aka "dataURL".
To use it binary and put it as the src you can make a ObjectURL.
var objectURL = URL.createObjectURL(blob);
image.src=objectURL;
You don't need a fileReader for this, but you will need fileReader for your exif analysis

read in a file from url or filesystem to variable in javascript

I am trying to read in a file from a file on my computer and store in in a variable.
I am currently trying:
var fr = new FileReader;
fr.onload = function() {
//variable to hold file
var data = fr.result;
var c=document.getElementById("cvs");
var ctx=c.getContext("2d");
ctx.drawImage(img,0,0,200,180);
};
fr.readAsDataURL("encryptedImage");
this does not work. I need to do this do i can decrypt an encrypted image on my file system. I have already turned of the security so my file system can be read from a browser.
any ideas?
From here it looks like you want to load the local file by passing a String to readAsArrayBuffer(), but it exspects a blob or file object. The file can be loaded via the browsers file dialog.
Steps are : Select the file, load the file via fileReader asArrayBuffer or asDataURL or asBinaryString ... and manipulate or use the data in your code.
For this example it creates an Image from the local file and draws it onto the canvas (if it's of correct mime type "image.*" however).
I'm not sure what kind of encoding/decoding you want to apply. But for custom manipulation of data I would recommend using ArrayBuffers and TypeArrays.
The example with FileReader.readAsDataURL(): http://jsfiddle.net/uvmD7/
<body>
<canvas id="cvs" width="200" height="200"></canvas>
<input type="file" id="files" name="files[]" multiple />
</body>
And the script:
document.getElementById('files').addEventListener('change', handleFileSelect, false);
var fr = new FileReader();
function handleFileSelect(evt) {
var files = evt.target.files;
fr.readAsDataURL(files[0]);
};
fr.onload = function(evt) {
// do sth with it
var data = evt.target.result; //fr.result
img = new Image();
img.src = data;
// draw after load
img.onload = function() {
var c=document.getElementById("cvs");
var ctx=c.getContext("2d");
ctx.drawImage(img,0,0,200,180);
};
};

Categories

Resources