Аудио плеер с обложкой альбома в качестве фонового изображения

Question

Аудио плеер с обложкой альбома в качестве фонового изображения

1

Как сделать аудиоплеер с обложкой обложки альбома в качестве фонового изображения, чтобы все кнопки управления воспроизведением находились поверх этого изображения. Я использовал это

<audio controls = 'controls'>
    <source src='' type= 'audio/mp3'>
</audio>

но это не позволяет мне добавлять изображение, я много гугл без успеха.

Roman 25 окт. 2017, в 14:40

Источник

1

Хммм. Div с фоном, который вы хотите, и аудио тег расположен на верхней части изображения?
Gezzasa 25 окт. 2017, в 12:21
0

да, что-то в этом роде, но я не думаю, что это хорошая идея использовать div с фоновым изображением!
Roman 25 окт. 2017, в 13:01
0

Могу я спросить, почему div - плохая идея?
Gezzasa 26 окт. 2017, в 05:16
0

Спасибо, наконец-то идея поставить div background работала нормально.
Roman 01 нояб. 2017, в 16:16
0

Хаха, рад, что смог помочь. Я отправил ответ, если вы хотите отметить его
Gezzasa 02 нояб. 2017, в 05:06

Показать ещё 3 комментария

Теги:

javascript

css

html5

bootstrap-4

2 ответа

Ещё вопросы

Хммм. Div с фоном, который вы хотите, и аудио тег расположен на верхней части изображения?
да, что-то в этом роде, но я не думаю, что это хорошая идея использовать div с фоновым изображением!
Могу я спросить, почему div - плохая идея?
Спасибо, наконец-то идея поставить div background работала нормально.
Хаха, рад, что смог помочь. Я отправил ответ, если вы хотите отметить его

Gezzasa · Answer 1 · 2017-11-02T02-54-00.000Z

Вы можете расположить div как относительный, размер его по мере необходимости и поместить аудиоплеер в div как абсолютный.

https://jsfiddle.net/os2yd6x3/1/

<div class="audioPlayer">
  <audio controls = 'controls'>
    <source src='' type= 'audio/mp3'>
  </audio>
</div>

.audioPlayer {
    width: 500px;
    height: 300px;
    background-image: url('http://arbordayblog.org/wp-content/uploads/2016/06/tree.jpg');
    background-size: cover;
    position: relative;
}

.audioPlayer audio{
  position: absolute;
  bottom: 0;
  width: 100%
}

Я также поместил изображение (обложку альбома) в качестве фонового изображения div
Да :). Я использовал цвет BG для представления фонового изображения. Я обновил свою скрипку с изображением

Ivan Tilikin · Answer 2 · 2017-10-25T09-49-00.000Z

Вы можете захватить обложку альбома из media tags аудиофайла с помощью jsmediatags.

А затем положите его на div.

Пример - считыватель ID3