Хранение аудиофайлов - это прежде всего дело рук ихних правообладателей. Если Вы таковым являетесь, то есть такие варианты:
- Обычный хостинг. Просто загружаете файлы и ссылки на них можно использовать в плеерах, как src.
- Сервисы облачного хранения аудиофайлов с двоякой миссией - с которых можно скачивать со страницы для скачивания и они же предоставляют ссылки на файлы, которые можно использовать в плеерах.
Если же Вы не являетесь правообладателем файлов, то нужно заключить с ним договор, после чего он предоставит ссылки на аудиофайлы, находящиеся на другом сервере, которые можно будет использовать в Вашем плеере не вызывая блокировку типа
coors. Так что нет необходимости думать над тем, где хранить сами файлы. Представьте, вдруг у каждого будет такая же идея - сколько придётся копировать одни и те же файлы на разные сервера и хостинговые аккаунты?
Ещё - нет необходимости хранить в массиве
json имена файлов и метаданные. (исполнитель, альбом, жанр) Файлы по ссылкам правообладателей файлы содержат эти метатеги, (даже картинку-превью) и их остаётся только программно прочитать. Для этого подходит
библиотека id3-minimized.js. А PHP-функция
scandir() навсегда избавит от хранения имён файлов в JS- массивах. Допустим, аудиофайлы у Вас лежат в папке
audio:
<meta charset='utf-8' />
<script src="id3-minimized.js"></script>
<?php
$files = scandir('audio');
$id = 0;
for($i = 2; $i < count($files); $i ++){
echo '<table><tr><td>
<img id=picture'.$id.' />
</td><td>
<table class=list>
<tr><td><b>Название трека: </b></td><td></td></tr>
<tr><td><b>Исполнитель: </b></td><td></td></tr>
<tr><td><b>Альбом: </b></td><td></td></tr>
<tr><td><b>Жанр: </b></td><td></td></tr>
<tr><td><b>Год записи: </b></td><td></td></tr>
</table>
</tr></td></table>
<audio src="audio/'.$files[$i].'" controls></audio>';
$id ++;
}
?>
<script>
let id3Array = 'title, artist, album, genre, year, picture'.split(', ');
let tracs = document.querySelectorAll('audio');
let tags = [];
let amountOfTracks = <?=count($files) - 2; ?>;
for(j = 0; j < amountOfTracks; j ++){
let url = tracs[j].src;
ID3.loadTags(url, function() {
tags[j] = ID3.getAllTags(url);
let image = tags[j].picture;
if(image){
document.getElementById('picture' + j).style.display = 'block';
let base64String = "";
for(let i = 0; i < image.data.length; i ++) base64String += String.fromCharCode(image.data[i]);
let base64 = "data:" + image.format + ";base64," + window.btoa(base64String);
document.getElementById('picture' + j).src = base64;
}else{document.getElementById('picture' + j).style.display = 'none'};
},{
tags: id3Array
});
for(i = 0; i < id3Arraylength - 1; i ++) document.querySelectorAll('.list')[j].querySelectorAll('td')[i * 2 + 1].innerText = eval('tags[j].' + id3Array[i]);
}
</script>
А это простой локальный плеер с плейлистом с использованием такого json, как у Вас на примере трёх альбомов, в каждом из которых три трека:
<style>
li{
width: 200px;
border-radius: 5px;
}
</style>
<audio id=audio controls></audio><br /><br />
<b>Альбомы: </b>
<a href=# class=selectAlbum>album1</a> |
<a href=# class=selectAlbum>album2</a> |
<a href=# class=selectAlbum>album3</a><br /><br />
<b>Треки:</b>
<ul id=playlist></ul>
<script>
let selectedAlbum;
let album1=[
{
name: 'name1',
artist: 'artist1',
src: 'track1.mp3'
},
{
name: 'name2',
artist: 'artist2',
src: 'track2.mp3'
},
{
name: 'name3',
artist: 'artist3',
src: 'track3.mp3'
}
];
let album2=[
{
name: 'name4',
artist: 'artist4',
src: 'track4.mp3'
},
{
name: 'name5',
artist: 'artist5',
src: 'track5.mp3'
},
{
name: 'name6',
artist: 'artist6',
src: 'track6.mp3'
}
];
let album3=[
{
name: 'name7',
artist: 'artist7',
src: 'track7.mp3'
},
{
name: 'name8',
artist: 'artist8',
src: 'track8.mp3'
},
{
name: 'name9',
artist: 'artist9',
src: 'track9.mp3'
}
];
let albums = document.querySelectorAll('.selectAlbum');
for(i = 0; i < albums.length; i ++){
albums[i].onclick = function(){
audio.pause();
playlist.innerText = '';
selectedAlbum = eval(this.innerText);
for(j = 0; j < selectedAlbum.length; j ++){
let li = document.createElement('li');
li.id = j;
li.style.cursor = 'pointer';
li.innerHTML = ' ' + selectedAlbum[j].artist + ' - ' + selectedAlbum[j].name;
li.onclick = function(){
for(h = 0; h < selectedAlbum.length; h ++)document.getElementById(h).style.background = 'white';
this.style.background = 'gold';
audio.src = 'audio/' + selectedAlbum[this.id].src;
audio.play();
}
playlist.append(li);
}
}
}
</script>
Выбираете альбом, появляется список его треков. Кликом по названию трека запускаете его воспроизведение.
