播放本地音频（多文件）

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

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

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

x

本帖最后由马黑黑于 2022-6-6 19:28 编辑

请选择文件

马黑黑 · 发表于 2022-6-6 18:00

代码：未对文件进行格式过滤

<style type="text/css">
.mama { margin: auto; width: fit-content; height: fit-content; position: relative; }
.mama fieldset { margin-top: 10px; padding: 4px 10px; border: 1px solid #eee; background: #ccc linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.15)); box-shadow: 1px 1px 2px #444; }
.mama fieldset legend { padding: 4px 8px; border: 1px solid #eee; background: inherit; }
#file { display: none; }
#aud { outline: none; }
#audlist { color: black; }
#audlist li { cursor: pointer; }
</style>
<div class="mama">
<fieldset>
<legend><label style="cursor: pointer;">请选择文件<input id="file" type="file" accept="audio/*" multiple="multiple" /></label></legend>
<ol id="audlist"></ol>
</fieldset>
<p><br><audio id="aud" controls="controls" autoplay="autoplay"></audio></p>
</div>
<script language="javascript">
let file = document.querySelector('#file'),
aud = document.querySelector('#aud'),
audlist = document.querySelector('#audlist');
let filelist = [];
let idx = 0;
file.onchange = () => {
let fileArr = file.files;
if(fileArr.length) {
audlist.innerHTML = '';
filelist.length = 0;
Array.from(fileArr).forEach((item,key) => {
let ar = [item.name,URL.createObjectURL(item)];
filelist.push(ar);
let listr = '<li onclick="playselected(' + key + ')">' + item.name.split('.')[0] + '</li>';
audlist.innerHTML += listr;
})
aud.src = filelist[0][1];
setColor();
}
}
aud.addEventListener('ended', () => {
idx ++;
if(idx >= filelist.length) idx = 0;
aud.src = filelist[idx][1];
setColor();
})
let setColor = () => {
Array.from(audlist.children).forEach((li,key) => {
key == idx ? li.style.color = 'black' : li.style.color = 'gray';
})
}
let playselected = (id) => {
idx = id;
aud.src = filelist[idx][1];
setColor();
}
</script>

复制代码

马黑黑 · 发表于 2022-6-6 18:11

打开本地音频文件的多选方法：

方法一：单击选中一个文件后，按 shift 键不放，鼠标指针移动到前面文件之前或之后的文件，相中某个文件后单击它，松开shift键。这会选择两个文件之间包含该两个文件的相连的所有文件，然后单击确定按钮。

方法二：单击选中第一个文件后，按 Ctrl 键不放，然后任意单击想要选择的其它文件，选够了松开 Ctrl键，单击确定按钮。

方法三：找到音频目录后，按 Ctrl键 + A，这回全选音频文件，再点击确定按钮。

每一次打开本地音频文件，播放列表都会被清空。

单击播放列表中的歌名，audio 会转到对该文件的播放，播放完毕继续往下播放，播放到最后一首会从头再来。

马黑黑 · 发表于 2022-6-6 18:17

为什么不加入文件格式过滤机制？

实际上，input[type='file']已经有了文件过滤机制，但远远不够：一者，audio标签还在发展中，对所有格式的音频文件的支持应不是一日之功，二者，绕过input标签的过滤机制轻而易举。

但我们这个小程序不是文件上传的东东，是自娱自乐的，所以都会善待自己，除非测试，否则不会打开镁铝图片给 audio 播放。