论坛 › 马黑黑教程专版 › 播放本地音频（多文件）

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

播放本地音频（多文件）

本帖最后由 马黑黑 于 2022-6-6 19:28 编辑 <br /><br /><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;
                idx = 0;
                Array.from(fileArr).forEach((item,key) => {
                        let ar = ;
                        filelist.push(ar);
                        let listr = '<li onclick="playselected(' + key + ')">' + item.name.split('.') + '</li>';
                        audlist.innerHTML += listr;
                })
                aud.src = filelist;
                setColor();
        }
}

aud.addEventListener('ended', () => {
        idx ++;
        if(idx >= filelist.length) idx = 0;
        aud.src = filelist;
        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;
        setColor();
}

</script>

马黑黑 发表于 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 = ;
                        filelist.push(ar);
                        let listr = '<li onclick="playselected(' + key + ')">' + item.name.split('.') + '</li>';
                        audlist.innerHTML += listr;
                })
                aud.src = filelist;
                setColor();
        }
}

aud.addEventListener('ended', () => {
        idx ++;
        if(idx >= filelist.length) idx = 0;
        aud.src = filelist;
        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;
        setColor();
}

</script>

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

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

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

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

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

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

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

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

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

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

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

加林森 发表于 2022-6-6 18:18

老黑这个制作真方便了大家了啊。谢谢老黑。你太伟大了！{:4_199:}

马黑黑 发表于 2022-6-6 18:19

加林森 发表于 2022-6-6 18:18
老黑这个制作真方便了大家了啊。谢谢老黑。你太伟大了！

你的电脑上应该有很多MP3{:4_170:}

加林森 发表于 2022-6-6 18:24

马黑黑 发表于 2022-6-6 18:19
你的电脑上应该有很多MP3

是啊，我有很多专辑的。

马黑黑 发表于 2022-6-6 19:21

加林森 发表于 2022-6-6 18:24
是啊，我有很多专辑的。

厉害厉害

加林森 发表于 2022-6-6 19:26

马黑黑 发表于 2022-6-6 19:21
厉害厉害

我喜欢得嘛。{:5_117:}

马黑黑 发表于 2022-6-6 19:27

加林森 发表于 2022-6-6 19:26
我喜欢得嘛。

嗯嗯，挺好。发现这个程序有啥问题，反馈一下，毕竟刚做好，也没有多少测试

加林森 发表于 2022-6-6 19:32

马黑黑 发表于 2022-6-6 19:27
嗯嗯，挺好。发现这个程序有啥问题，反馈一下，毕竟刚做好，也没有多少测试

好的，有问题我会告诉你的，你放心吧。

马黑黑 发表于 2022-6-6 19:33

加林森 发表于 2022-6-6 19:32
好的，有问题我会告诉你的，你放心吧。

OK

加林森 发表于 2022-6-6 19:36

马黑黑 发表于 2022-6-6 19:33
OK

{:5_146:}

红影 发表于 2022-6-6 20:20

这个好，不但能加多首歌曲，还能在多歌曲里切换，想听哪首就听哪首{:4_187:}

红影 发表于 2022-6-6 20:26

这个没限制文件类型，好像都能打开呢，发现m4a的也能打开。

马黑黑 发表于 2022-6-6 20:43

红影 发表于 2022-6-6 20:26
这个没限制文件类型，好像都能打开呢，发现m4a的也能打开。

它不是没有限制，只是宽松

红影 发表于 2022-6-6 20:45

马黑黑 发表于 2022-6-6 20:43
它不是没有限制，只是宽松

还能看到文件名和文件信息，真不错{:4_187:}

马黑黑 发表于 2022-6-6 20:45

红影 发表于 2022-6-6 20:45
还能看到文件名和文件信息，真不错

还行吧

马黑黑 发表于 2022-6-6 20:45

红影 发表于 2022-6-6 20:20
这个好，不但能加多首歌曲，还能在多歌曲里切换，想听哪首就听哪首

这个功能容易做的

红影 发表于 2022-6-6 22:25

马黑黑 发表于 2022-6-6 20:45
这个功能容易做的

我是觉得特别好。黑黑分享了好多非常实用的东西{:4_187:}

查看完整版本: 播放本地音频（多文件）