JavaScript 播放上传的音频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28619550/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript Play Uploaded Audio
提问by John White
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>
回答by Kaiido
[EDIT]
[编辑]
One should not use the FileReader API to load an user selected File into its page.
不应使用 FileReader API 将用户选择的文件加载到其页面中。
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.
相反，人们应该更喜欢这种URL.createObjectURL(File)方法。
这将返回一个 blobURI，只能从用户会话访问，在用户 File 的情况下，它只是指向原始文件的直接指针，因此在内存中几乎没有任何内容。
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".
您无法访问本地文件的完整 url 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>回答by enhzflep
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>
回答by Cannicide
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!
这与@Kaiido 投票最多的答案几乎相同，但使用的是 Jquery。此外，您必须.load();在播放之前使用加载音频。所以这段代码的作用是你可以上传任何音频文件，它会自动开始播放。谢谢！
