10

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>
John White
  • 109
  • 1
  • 1
  • 6
  • Updated: It's a security problem if the javascript gets access to the full-path of the selected file. So, if the chosen file doesn't exist in the same directory as the HTML code, the chosen file wont work because the JS only gets the filename without any path information. You also can't get the url like you try to. You need to use `url = obj.files[0].name;` if you wish to get the name of the first file selected. To get around the security policy, you can (I imagine, it works with images) read the file in, turn it into a dataURL then set that as the src. – enhzflep Feb 20 '15 at 00:46

3 Answers3

31

[EDIT]

One should not use the FileReader API to load an user selected File into its page.

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>

[Previous answer]

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>
Community
  • 1
  • 1
Kaiido
  • 123,334
  • 13
  • 219
  • 285
3

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>
enhzflep
  • 12,927
  • 2
  • 32
  • 51
3

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!

Cannicide
  • 4,360
  • 3
  • 22
  • 42