JavaScript播放上传的音频
JavaScript Play Uploaded Audio
如何使其在上传音频时可以播放?我使用了这个代码,但它不起作用。
<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>
[EDIT]
不应使用FileReader API将用户选择的文件加载到其页面中
相反,人们应该更喜欢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>
[上一个答案]
您无法使用input type="file"
访问本地文件的完整url。
但是,由于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>
正如我在评论中提到的,有几件事阻碍了您的方法的工作。
下面是一个处理图像、视频和声音的快速示例。
<!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>
这与@Kaiido投票最多的答案几乎相同,但使用了Jquery。此外,在播放音频之前,您必须使用.load();
加载音频。因此,此代码为您所做的是,您可以上传任何音频文件,它将自动开始播放。谢谢
相关文章:
- 动态加载的自定义javascript/jQuery/HTML5音频播放器的问题
- Javascript::通过HTML5音频播放器播放列表播放多个音频文件
- HTML5、CSS3和/或JS中旋转CD上的音频播放器
- 想制作一个基于URL的音频播放器,但Javascript不起作用
- 多个音频播放器和 Web 音频 API
- 创建一个只有播放和暂停的Javascript音频播放列表
- HTML5音频播放器只有在双击后才能在移动浏览器上播放
- 为什么我的代码使用javascript与html5音频播放器可以'Don’我不能做两个或两个以上
- 如何用一个html5音频播放器播放多个音频文件
- 需要帮助修复我的javascript"对于循环“;播放音频播放列表
- JS音频播放器,点击列表项即可播放
- HTML5+Javascript音频在音频播放的特定时间触发事件
- 自动播放音频播放列表SoundManager2 bar ui
- jQuery:支持几乎所有格式的音频播放器
- 制作一个html5音频播放列表,自动播放一首又一首歌曲
- 如何在 javascript 中为推送通知提供音频播放文件路径
- 从我自己的按钮启动音频播放器
- 浏览器内音频播放器如何工作
- 如果未找到动态音频 src 或为 null,请使用 javascript 隐藏 HTML5 音频播放器
- 在HTML音频播放器中切换播放/暂停按钮