上传和播放音频文件JS [英] Upload and Play Audio File JS

问题描述

我有一个HTML音频标签和一个HTML文件输入标签，如下所示。我希望用户使用上传文件按钮从他们的计算机中选择一首歌曲，然后使用音频标签播放。

I have an HTML audio tag and an HTML file input tag, as shown below. I'd like users to use the Upload File button to select a song from their computer, then play it using the audio tag.

<audio id="audio">
    <source src="" id="thesource" />
</audio>
<input type="file" id="upload" title="Upload File" />

如何让用户从他们的计算机上传音频文件并进行播放？这必须在本地完成，因为它正在我正在创建的可下载的Web应用程序中使用。

How do I let users upload audio files from their computer and play it? This must be done locally, as it is being used in a downloadable web app I am creating.

编辑：我原来的问题是如何转换图像上传器工作并跨浏览器进入音频上传器。很久以前，经过大量艰苦的工作并重新发现过去的项目，我开发了一种方法。现在，在我最初提出这个问题近一年之后，我觉得因为没有早点实现这个答案而感到愚蠢。我在下面给出了任何需要这个的人的答案。

The original question I had was how to turn an image uploader that worked and was cross-browser into an audio uploader. Long ago, after lots of hard work and rediscovering past projects, I developed a way to do so. Now, nearly a year after I originally asked this question, I feel stupid for not realizing that answer earlier. I posted the answer down below for any people who also need this.

推荐答案

我原来说没有答案 - 我是错误。我找到了答案。

I originally said there was no answer -- I was wrong. I have found the answer.

function handleFiles(event) {
	var files = event.target.files;
	$("#rlly").attr("src", URL.createObjectURL(files[0]));
	document.getElementById("rllly").load();
}

document.getElementById("rll").addEventListener("change", handleFiles, false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="rll" />
<audio id="rllly" controls>
  <source src="" id="rlly" />
</audio>

这正是我想要的 - 它允许上传任何音频文件并播放它。哇！我回答了自己的问题！尝试在代码段中上传计算机上的所有音乐。

This does exactly what I wanted -- it allows uploading of any audio file and plays it. Wow! I answered my own question! Try uploading any music on your computer in the snippet.

这篇关于上传和播放音频文件JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！