Блог

Вот моя проблема :

Мне нужно было бы создать кнопки предварительного просмотра для веб-сайта библиотеки песен MP3.

Вот особенности :

• Кнопки должны переключаться с воспроизведения на паузу и возвращаться обратно при нажатии
• Кнопки также должны запускать воспроизведение () -пауза () аудиоплеер HTML5

У меня есть рабочий пример онлайн, но использование идентификаторов для divs настолько сложно, что при наличии более 100 экземпляров некоторые браузеры вылетают из-за слишком большого объема вычислений.

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

вот живой пример того, что необходимо: http://www.childrensmusicshop.com/button.php

Я использую PHP и CSS для этого. Вот код одного экземпляра, который работает, но приводит к сбою браузеров :

 <div id="<?php print $wrap_div_play_id;?>" style="position:absolute;visibility:visible;z-index:1;right:86px;margin:0 0 0 0; padding:0 0 0 0;">

<div id="<?php print $div_play_id;?>" style="position:absolute;visibility:visible;z-index:1;top:-15px;">
    <img src="/images/bouton-play.png" onclick="document.getElementById('<?php print $audio_id;?>').play();document.getElementById('<?php print $div_pause_id;?>').style.visibility='visible'">
</div>

<div id="<?php print $div_pause_id;?>" style="position:absolute;visibility:hidden;z-index:2;top:-15px;">
    <img src="/images/bouton-stop.png" onclick="document.getElementById('<?php print $audio_id;?>').pause();document.getElementById('<?php print $div_pause_id;?>').style.visibility='hidden'">
</div>    

</div>


<audio id="<?php print $audio_id;?>">
<source src="<?php print $file_player_song;?>.ogg" type="audio/ogg" />
<source src="<?php print $file_player_song;?>.mp3" type="audio/mpeg" />
</audio>