JavaScript: события на примере mp3 плеера

Продолжаем знакомиться с событиями JavaScript.

Первая часть тут: http://snakeproject.ru/rubric/article.php?art=jvascript_gallery_events

Теперь создадим простой flash mp3 player:

Иерархия папок:

Код в style.css:

ul.player li { padding: 9px 5px 10px 40px; background: url(images/media_btn.png) no-repeat 8px 7px; cursor: pointer; } ul.player li:hover { background-color: silver; } ul.player li#playing { background: url(images/media_play_btn.png) no-repeat 8px 7px; background-color: silver; } ul.player li#paused { background: url(images/media_pause_btn.png) no-repeat 8px 7px; background-color: #666; }

Код в index.html:

<html> <head> <title>JavaScript Player</title> <link rel="stylesheet" href="style.css" /> </head> <body> <ul class="player"> <li data-src="audio/01. DJ Shershen - Блюз не танец.mp3">01. DJ Shershen - Блюз не танец</li> <li data-src="audio/07. Бабушкины сказки - Сектант.mp3">07. Бабушкины сказки - Сектант</li> <li data-src="audio/08. Duty Free - Женщина кошка.mp3">08. Duty Free - Женщина кошка</li> </ul> <script src="script.js"></script> </body> </html>

Код в script.js:

//Продолжаем знакомиться с событиями JavaScript //1 часть: http://snakeproject.ru/rubric/article.php?art=jvascript_gallery_events document.querySelector('ul.player').addEventListener('click', function(object){ //Получаем песню var Song = object.target.getAttribute('data-src'); var Player = document.querySelector('#player'); if(Player){ //Смотрим песню if(Song===Player.getAttribute('src')){ if(Player.paused){ //http://f-ph.ru/blog/13 //play() — проигрывает файл с начала или места последней остановки Player.play(); object.target.id = 'playing'; }else{ //pause() — останавливает проигрывание файла, место остановки запоминается Player.pause(); object.target.id = 'paused'; } }else{ Player.src = Song; Player.play(); if(document.querySelector('#playing')){ document.querySelector('#playing').id=''; }else{ document.querySelector('#paused').id=''; } object.target.id = 'playing'; } }else{ //встраивание стороннего Flash плеера и использование HTML5-тега audio var Player = document.createElement('audio'); Player.id = 'player'; object.target.id = 'playing'; Player.src = Song; document.body.appendChild(Player); Player.play(); Player.addEventListener('ended', function() { Player.parentNode.removeChild(Player); object.target.id=''; }, false); } }, false);

Комментарии пользователей

Эту новость ещё не комментировалиНаписать комментарий

Анонимам нельзя оставоять комментарии, зарегистрируйтесь!

Разное

Если Вы хотите обменяться ссылками со мной между сайтами - пишите в контактах

Видео к статьям на Youtube

Мой баннер

Код обмена баннерами:
Код баннера

Мои друзья:

Главная	⇒ Статьи IT ⇐	Видео IT	Файлы	Контакты
JavaScript/jQuery/AJAX	Учебники Python 3, Powershell, Linux	IP-Калькулятор	NSLOOKUP	Карта сайта
Группа в ВК	Краткий учебник PostgreSQL \| Docker	Учебник по BASH	Полезные команды Unix	Музло и разные обзоры