Плеер HTML5 помощь

09.06.2015

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

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

Нажмите и перетащите
плеер выглядит вот так:

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

09.06.2015

это не совсем по адресу...

09.06.2015

а куда написать? здесь всё таки помошь...

09.06.2015

Вместо

1.  
2. <button onclick="document.getElementById('audio').play()">Play</button>

Делаете

1.  
2. <img src="путь до картинки" onclick="document.getElementById('audio').play()" />

Аналогично и с другими кнопками

09.06.2015

Есть с этим разобрался, а как теперь сделать взаимо заменяемость, я нажимаю плей вместо неё появляется пауза? и как убрать вот это

09.06.2015

до меня дошло как это сделать ,вообщем получилось вот так

1. <audio id="audio" src="http://free.radioheart.ru:8000/bvrfm" controls ></audio>
2. <img src="http://margchat.at.ua/img/Play-icon-Azul.png" onclick="if (this.src=='http://margchat.at.ua/img/Play-icon-Azul.png') {this.src='http://margchat.at.ua/img/PauseDisabled.png'; document.getElementById('audio').play() } else { this.src='http://margchat.at.ua/img/Play-icon-Azul.png'; document.getElementById('audio').pause() };" />
3. </h2>

Но как убрать вот это

09.06.2015

1.  
2. <audio id="audio" src="http://free.radioheart.ru:8000/bvrfm" controls style="display:none"></audio>

или

1.  
2. <audio id="audio" src="http://free.radioheart.ru:8000/bvrfm" controls style="visibility:hidden"></audio>

10.06.2015

Спасибо большое все работает)! Только проблема возникла, открыл его через другой браузер, а там музыка не играет((( Для меня это не страшно, а вот для слушателей будет не удобно

11.06.2015

Не все браузеры поддерживают html5 audio тег, который вы используете

11.06.2015

да вот прикол в том что, этот плеер не работает в браузере Uran Opera и Mozilla а вот плеер с таких сайтов как europaplus.ru работает отлично, во всех браузерах, там я насколько понимаю, тоже стоит html5

12.06.2015

там flash
у каждого браузера разные форматы аудио поддерживаются, также зависит от их версии