Menu
How do I make it so that when audio is uploaded it can be played? I used this code, but it didn't work.
<input type="file" id="audio" onchange="playFile(this)" />
<audio id="sound"></audio>
<script type="text/javascript">
function playFile(obj){
var url=document.getElementById("audio").url;
document.getElementById("sound").src=url;
document.getElementById("sound").play()
}
</script>
429
play() to Play Audio Files in JavaScript. We can load an audio file in JavaScript simply by creating an audio object instance, i.e. using new Audio() . After an audio file is loaded, we can play it using the . play() function.
You can use Web Audio API for playing sounds. There are quite some audio libraries out there like howler. js, soundjs etc. If you don't worry about old browsers then you can also check on http://musquitojs.com/.
Instead one should prefer the URL.createObjectURL(File) method.
This will return a blobURI, only accessible from user session, which, in case of user File, is just a direct pointer to the original file, thus taking almost nothing in memory.
input.onchange = function(e){
var sound = document.getElementById('sound');
sound.src = URL.createObjectURL(this.files[0]);
// not really needed in this exact case, but since it is really important in other cases,
// don't forget to revoke the blobURI when you don't need it
sound.onend = function(e) {
URL.revokeObjectURL(this.src);
}
}<input type="file" id="input"/>
<audio id="sound" controls></audio>You can't access the full url of a local file with input type="file".
However you can read the file thanks to the file API
input.onchange = function(){
var sound = document.getElementById('sound');
var reader = new FileReader();
reader.onload = function(e) {
sound.src = this.result;
sound.controls = true;
sound.play();
};
reader.readAsDataURL(this.files[0]);
}<input type="file" id="input"/>
<audio id="sound"></audio>As I mentioned in my comment, there's a couple of things that prevent your approach from working.
Here's a quick example that deals with images, video and sound.
<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function byId(e){return document.getElementById(e);}
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
byId('mFileInput').addEventListener('change', onChosenFileChange, false);
}
function onChosenFileChange(evt)
{
var fileType = this.files[0].type;
if (fileType.indexOf('audio') != -1)
loadFileObject(this.files[0], onSoundLoaded);
else if (fileType.indexOf('image') != -1)
loadFileObject(this.files[0], onImageLoaded);
else if (fileType.indexOf('video') != -1)
loadFileObject(this.files[0], onVideoLoaded);
}
function loadFileObject(fileObj, loadedCallback)
{
var reader = new FileReader();
reader.onload = loadedCallback;
reader.readAsDataURL( fileObj );
}
function onSoundLoaded(evt)
{
byId('sound').src = evt.target.result;
byId('sound').play();
}
function onImageLoaded(evt)
{
byId('image').src = evt.target.result;
}
function onVideoLoaded(evt)
{
byId('video').src = evt.target.result;
byId('video').play();
}
</script>
<style>
</style>
</head>
<body>
<input type="file" id="mFileInput"/>
<br>
<audio id="sound"></audio>
<img id='image'/>
<video id='video'/>
</body>
</html>
function handleFiles(event) {
var files = event.target.files;
$("#audio").attr("src", URL.createObjectURL(files[0]));
$("#player")[0].load();
$("#player")[0].play();
}
document.getElementById("file").addEventListener("change", handleFiles, false);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file" />
<audio id="player" controls>
<source src="" id="audio" />
</audio>This is pretty much the same thing as the most upvoted answer by @Kaiido, but uses Jquery. Furthermore, you have to use .load(); to load the audio before you play it. So what this code does for you is you can upload any audio file, and it will automatically start playing. Thanks!
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
