Использование HTML5 для управления переключателями фоновой музыки

Иногда мы добавляем фоновую музыку на страницу, позволяя пользователям самостоятельно включать и выключать фоновую музыку, особенно мультимедийные страницы, изготовленные на основе мобильных HTML5. Аудио тег HTML5 может получить статус воспроизведения звука, а фоновая музыка может быть выключена и включена, касаясь кнопки.

Рендеринги следующие:

Создайте страницу HTML5, разместите тег <Audio>, установите источник аудиофайла и установите воспроизведение цикла. Подготовьте две картины, указывая на два состояния включения и приостановки фоновой музыки, вы можете нажать.

Xml/html -код копировать содержимое в буфер обмена

1. <audioid = music2src = music.mp3loop = loop> Ваш браузер не поддерживает аудиотеж. </audio>
2. <ahref = javascript: playpause ();> <imgsrc = pause.gifwidth = 48Height = 50id = music_btn2border = 0> </a>

Когда мы нажали кнопку «Переключение изображения», мы вызвали сценарий JavaScript и функцию PlayPause (). В этой функции судите по статусу воспроизведения аудио аудио. Если он был остановлен (приостановлен), позвоните .play (), чтобы продолжать играть. Если это в статусе воспроизведения, воспроизведение. Pause () будет немедленно приостановлен. При переключении между двумя состояниями см. Код:

JavaScript Code Copy Content в буфер обмена

1. functionPlayPause () {
2. varmusic = document.getelementbyid ('music2');
3. varmusic_btn = document.getelementbyid ('music_btn2');
4. if (music.paused) {
5. music.play ();
6. music_btn.src = 'play.gif';
7. }
8. еще{
9. Music.pause ();
10. music_btn.src = 'pause.gif';
11. }
12. }

Если вы используете код jQuery, вы можете написать его так:

JavaScript Code Copy Content в буфер обмена

1. <audioid = musicsrc = http: //cctv3.qiniudn.com/zuixingfuderen.mp3autoplay=autoplayloop=loop> Ваш браузер не поддерживает аудиогибл. </audio>
2. <aid = audio_btn> <imgsrc = play.gifwidth = 48Height = 50id = music_btnborder = 0> </a>
3. <Скрипт>
4. $ (#audio_btn) .click (function () {
5. varmusic = document.getelementbyid (music);
6. if (music.paused) {
7. music.play ();
8. $ (#music_btn) .attr (src, play.gif);
9. }еще{
10. Music.pause ();
11. $ (#music_btn) .attr (src, pause.gif);
12. }
13. });
14. </script>