Как вставить на сайт картинку-обложку, встроенную в мп3-аудиофайл во время воспроизведения этого файла?
Интересует вопрос - как отобразить на сайте картинку-обложку, встроенную в мп3-аудиофайл во время воспроизведения этого файла ориентировочно с помощью элемента аудио? Гуглёж ни к чему не привёл. За раннее спасибо.
Ответы (1 шт):
Автор решения: Опан
→ Ссылка
Для этого можно использовать библиотеку JavaScript-ID3-Reader:
<!DOCTYPE html>
<html>
<head>
<title>Музыка с обложкой</title>
<script src="id3-minimized.js"></script>
</head>
<body>
<center>
<audio id=audio src="sound.mp3" controls></audio><br /><br />
<img id="picture" />
</center>
<script>
var url = audio.src;
ID3.loadTags(url, function() {
var tags = ID3.getAllTags(url);
var image = tags.picture;
if (image) {
var base64String = "";
for(var i = 0; i < image.data.length; i++) base64String += String.fromCharCode(image.data[i]);
picture.src = "data:" + image.format + ";base64," + window.btoa(base64String);
}else{picture.style.display = "none"};
},{
tags: ["picture"]
});
</script>
</body>
</html>При чём, для этой цели из всей библиотеки достаточно одного файла id3-minimized.js