播放本地音频（单个文件）

马黑黑 · 发表于 2022-6-6 07:27

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-6-6 07:36 编辑

测试：播放本地音频

马黑黑 · 发表于 2022-6-6 07:57

核心技术：

一、调出打开本地文件对话框（HTML）

用 input 标签，type="file" 时 input 标签将打开本地资源管理器。file 性质的input 可以过滤文件类型，对应属性为 accept，它规范 input file 可接受的文件类型，支持多个文件类型的规范。本例 input 标签代码：

<input type="file" id="file" accept=".mp3, .ogg, .wav, .acc, .webm" />

① type="file" 规定了 input 的作用：用于打开本地文件；
② id="file" 给元素定义自定义的id标识符
③ accept=".mp3, .ogg, .wav, .acc, .webm" 规定了对话框能打开什么类型的文件

二、处理用户打开后的结果（JS）

（一）通过JS内置的 files 函数可得到用户打开打开的文件列表数据，以数组形式存储用户选择的文件数据，我们只需该数组的第一项：

let fileAr = obj.files;
let filename = fileAr[0];

这将从 obj 对象（即 input file对象）给出的结果中得到文件名。

（二）将文件转换为URL地址

JS内置一个API接口，即 URL API，可将本地被选择的文件转换成url，为 audio、img 等提供可供使用的资源。我们知道，HTML的元素不能直接使用本地资源，所以要这么做。语句：

URL.createObjectURL(文件名)

例如，我们在前面获得了文件名 filename，audio 所需的 src 就可以通过 URL API 来转换为可用的 url 资源：

aud.src = URL.createObjectURL(filename)

马黑黑 · 发表于 2022-6-6 07:58

一楼核心代码：

<p><input type="file" id="file" accept=".mp3, .ogg, .wav, .acc, .webm"/><br></p>
<p><audio id="aud" controls="controls" autoplay="autoplay" loop="loop"></audio></p>
<script>
let aud = document.querySelector('#aud'),
oFile = document.querySelector('#file');
oFile.onchange = () => {
let filelist = oFile.files; //获得文件列表
aud.src = URL.createObjectURL(filelist[0]); //将列表中首个文件转换成url地址
}
</script>