JavaScript 播放上传的音频答案

【问题标题】：JavaScript Play Uploaded AudioJavaScript 播放上传的音频
【发布时间】：2015-02-20 00:17:04
【问题描述】：

如何制作，以便在上传音频时可以播放？我用了这段代码，但是没有用。

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

【问题讨论】：

更新：如果 javascript 可以访问所选文件的完整路径，这是一个安全问题。因此，如果所选文件与 HTML 代码不存在于同一目录中，则所选文件将不起作用，因为 JS 仅获取文件名而没有任何路径信息。您也无法像尝试那样获得网址。如果您希望获得第一个选定文件的名称，您需要使用url = obj.files[0].name;。要绕过安全策略，您可以（我想它适用于图像）读取文件，将其转换为 dataURL，然后将其设置为 src。

标签： javascript file-upload media

【解决方案1】：

[编辑]

不应使用 FileReader API 将用户选择的文件加载到其页面中。

相反，人们应该更喜欢URL.createObjectURL(File) 方法。
这将返回一个 blobURI，只能从用户会话访问，对于用户文件，它只是指向原始文件的直接指针，因此几乎不占用内存。

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>

[上一个答案]

您无法使用input type="file" 访问本地文件的完整网址。

不过，感谢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>

【讨论】：

【解决方案2】：

正如我在评论中提到的，有几件事会阻止你的方法奏效。

这是一个处理图像、视频和声音的简单示例。

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

【讨论】：

【解决方案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>

这与@Kaiido 投票最多的答案几乎相同，但使用的是 Jquery。此外，您必须在播放之前使用.load(); 加载音频。所以这段代码为你做的是你可以上传任何音频文件，它会自动开始播放。谢谢！

【讨论】：