Question

Здравствуйте, нужна ваша помощь в стилизации самого простого аудио плеера. Вот есть код

<audio id="audio" src="http://free.radioheart.ru:8000/bvrfm" controls ></audio>
<button onclick="document.getElementById('audio').play()">Play</button>
<button onclick="document.getElementById('audio').pause()">Pause</button>
<button onclick="document.getElementById('audio').volume+=0.1">Vol +</button>
<button onclick="document.getElementById('audio').volume-=0.1">Vol -</button>

плеер выглядит вот так:

Помогите пожалуйста поставить вместо кнопок "play" "payse" "vol+" "vol-" картинки возпроизведения и громкости если нужно то я сброшу картинки.!) очень надеюсь на вашу помощь  

Comments

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

<img src="Сюда я ставлю картинку" onclick="document.getElementById('audio').play()" />

 

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

Answer 1

<img src="картинка_плей" onclick="if (this.src=='картинка_плей') {this.src='картинка_пауза'; document.getElementById('audio').play() } else { this.src='картинка_плей'; document.getElementById('audio').pause() };" />

 

Comments

А как теперь убрать вот это 

---

Стилизовать плеер или убрать некоторые элементы управления нельзя.

Можно использовать собственные графические изображения частей плеера - ползунок, кнопки, полосы загрузки и воспроизведения, таймер и т. д., а сам плеер использовать в невидимом состоянии (с ключом hidden. Он же действует по-умолчанию, если нет ключа controls.)

Но это уже вопрос из другой оперы. Это, скажем, не на 5 минут работы. Воспользуйтесь, например, таким сервисом как uppod. Получите настроенный по своему вкусу плеер бесплатно.