I'm trying to do something like this.
But I don't know why I'm not getting this thing work. Here it is the codepen example:
$('input').on('change', function(e) {
var file = e.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function(e) {
$('audio source').attr('src', e.target.result);
}
reader.readAsDataURL(file);
});
The source tag is receiving the base64 mp3 file, but it doesn't load the file into browser.
You set the src
attr directly on the audio element. fiddle
var $audio = $('#myAudio');
$('input').on('change', function(e) {
var target = e.currentTarget;
var file = target.files[0];
var reader = new FileReader();
console.log($audio[0]);
if (target.files && file) {
var reader = new FileReader();
reader.onload = function (e) {
$audio.attr('src', e.target.result);
$audio.play();
}
reader.readAsDataURL(file);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file">
<audio controls id="myAudio" autoplay></audio>