播放本地音频（单个文件）
本帖最后由 马黑黑 于 2022-6-6 07:36 编辑 <br /><br /><style>#fs { margin: 10px; padding: 10px; }
#file { outline: none; cursor: pointer; }
#meter { cursor: pointer; }
</style>
<fieldset id="fs">
<legend>测试：播放本地音频</legend>
<p><input type="file" id="file" accept=".mp3, .ogg, .wav, .acc, .webm"/><br><br></p>
<p><audio id="aud" controls="controls" autoplay="autoplay" loop="loop"></audio></p>
</fieldset>
<script>
let aud = document.querySelector('#aud'),
oFile = document.querySelector('#file');
oFile.onchange = () => {
let filelist = oFile.files; //获得文件列表
aud.src = URL.createObjectURL(filelist); //将列表中首个文件转换成url地址
}
</script>
核心技术：
一、调出打开本地文件对话框（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;
这将从 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)
一楼核心代码：
<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); //将列表中首个文件转换成url地址
}
</script>
这个真方便啊。直接可以查清音乐行不行的。赞！ 这个真神奇，居然能直接听本地音乐。我这里测试不出来，估计受单位局域网限制，等回家赶紧来测试{:4_187:} “可将本地被选择的文件转换成url”
这个url是本地的吧，应该只有自己能听，无法拿到其他帖子里去用的吧。 红影 发表于 2022-6-6 11:06
“可将本地被选择的文件转换成url”
这个url是本地的吧，应该只有自己能听，无法拿到其他帖子里去用的吧。
别人听不到，除非保存为服务器的文件，但这个功能js做不到，需要PHP 加林森 发表于 2022-6-6 08:31
这个真方便啊。直接可以查清音乐行不行的。赞！
这是打开访问者自己设备里的音频资源 红影 发表于 2022-6-6 11:06
“可将本地被选择的文件转换成url”
这个url是本地的吧，应该只有自己能听，无法拿到其他帖子里去用的吧。
这个url其实也是模拟的，存放于客户端内存中。
本例的JS播放本地音频，并未涉及到文件上传，但它的行为是与上传有关的，故而在受限的局域网里可能无法体验JS的这个功能 马黑黑 发表于 2022-6-6 13:00
这是打开访问者自己设备里的音频资源
挺好用的。谢谢老黑了。{:4_190:} 加林森 发表于 2022-6-6 13:32
挺好用的。谢谢老黑了。
还不错的 马黑黑 发表于 2022-6-6 17:53
还不错的
是啊。{:4_191:} 马黑黑 发表于 2022-6-6 13:02
这个url其实也是模拟的，存放于客户端内存中。
本例的JS播放本地音频，并未涉及到文件上传，但它的行 ...
我在单位也听不到网易云，郁闷。不过酷美倒是能听呢。 红影 发表于 2022-6-6 21:48
我在单位也听不到网易云，郁闷。不过酷美倒是能听呢。
限制有方向性的 马黑黑 发表于 2022-6-6 21:49
限制有方向性的
我也弄不清。在家的网络还好，一去单位觉得很麻烦。 红影 发表于 2022-6-6 22:37
我也弄不清。在家的网络还好，一去单位觉得很麻烦。
可以考虑移动的设备 马黑黑 发表于 2022-6-6 22:58
可以考虑移动的设备
还是习惯了电脑玩，手机最多看看微信。 红影 发表于 2022-6-7 11:15
还是习惯了电脑玩，手机最多看看微信。
我是说网络接入的设备
页:
[1]