发表新帖
发表新帖

JavaScript Play Uploaded Audio

后端 未结
关注
3 1485
不知归路
不知归路 2020-11-29 07:11

How do I make it so that when audio is uploaded it can be played? I used this code, but it didn\'t work.
相关标签:
3条回答
  • 清酒与你
    2020-11-29 07:24

    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>
    0 讨论(0)
  • 伪装坚强ぢ
    2020-11-29 07:33

    [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>

    0 讨论(0)
  • 迷失自我
    2020-11-29 07:46 

    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!

    0 讨论(0)
 看不清?
提交回复
热议问题