Forked from https://github.com/likev/html5-audio-player
Modified to fetch music file list in nginx directory and support playing
Full-screen adaptive mobile computer playlist
- The nginx configuration is as follows:
Note:
/music/
is your music directory, please modify it according to your actual situation.
location = /music/ {
autoindex on;
autoindex_format json;
autoindex_localtime on;
autoindex_exact_size off;
}
- Nginx returns a music file list in JSON format, as shown below:
[
{
"name": "Pháo _ CM1X - Hai Phút Hơn (Remix).ogg",
"type": "file",
"mtime": "Sat, 28 Oct 2023 05:31:05 GMT",
"size": 7835568
},
{
"name": "Really Slow Motion - Remembrance.flac",
"type": "file",
"mtime": "Sat, 28 Oct 2023 05:31:15 GMT",
"size": 15570219
}
]
Note: Please replace 'http//localhost/music/' with your music website link that returns
json
.
<script>
// test image for web notifications
var iconImage = null;
fetch('http//localhost/music/')/*Replace http//localhost/music/ with your music website directory*/
.then(response => response.json())
.then(data => {
const playList = data.map(item => ({
icon: iconImage,
title: item.name.split('.')[0],
file: `http//localhost/music/${item.name}`/*Replace http//localhost/music/ with your music website directory*/
}));
AP.init({
container:'#player',//a string containing one CSS selector
volume : 1,
autoPlay : false,
notification: false,
playList
});
})
.catch(error => console.error('Error:', error));
</script>
从https://github.com/likev/html5-audio-player分叉而来
已修改为获取nginx目录下音乐文件列表,并支持播放
列表为全屏自适应手机电脑
- nginx 配置如下:
注意
/music/
是你的音乐目录,请根据你的实际情况修改
location = /music/ {
autoindex on;
autoindex_format json;
autoindex_localtime on;
autoindex_exact_size off;
}
- nginx 返回 json 格式的音乐文件列表,示例如下:
[
{
"name": "Pháo _ CM1X - Hai Phút Hơn (Remix).ogg",
"type": "file",
"mtime": "Sat, 28 Oct 2023 05:31:05 GMT",
"size": 7835568
},
{
"name": "Really Slow Motion - Remembrance.flac",
"type": "file",
"mtime": "Sat, 28 Oct 2023 05:31:15 GMT",
"size": 15570219
}
]
注意:请将下面代码中的
http//localhost/music/
换成你的音乐网站返回json
的链接
<script>
// test image for web notifications
var iconImage = null;
fetch('http//localhost/music/')/*将http//localhost/music/换成你的音乐网站目录*/
.then(response => response.json())
.then(data => {
const playList = data.map(item => ({
icon: iconImage,
title: item.name.split('.')[0],
file: `http//localhost/music/${item.name}`/*将http//localhost/music/换成你的音乐网站目录*/
}));
AP.init({
container:'#player',//a string containing one CSS selector
volume : 1,
autoPlay : false,
notification: false,
playList
});
})
.catch(error => console.error('Error:', error));
</script>