Якщо ви заб'єте в Google запит про те, як запустити музику за допомогою CSS, ви, ймовірно, знайдете:
- Що-небудь про гру Counter Strike: Source
- Що-небудь про функції play-during або cue-before або що-небудь, що виглядає багатообіцяюче, але в реальності це буде лише посередньої навчальної статтею.
Ми не вважаємо, що різні звуки - це невід'ємна частина будь-якого веб-сайту, однак прикро, що до сих пір за допомогою CSS не було можливості запускати звук. Для того щоб запустити звук, коли курсор миші потрапляє в певну область сторінки, нам потрібно покластися на HTML5 і / або Flash. Але навряд чи тут хтось хоче мати справу з Flash, правда? Отже, давайте створимо це за допомогою HTML5, яка дозволяє нам запустити музику за допомогою нового елемента «audio» (Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9 +). Для того щоб вичавити з браузера максимальну можливість, ми реалізуємо це, використовуючи і джерело MP3 (для WebKit і IE) і за допомогою джерела OGG (для Firefox і Opera).
Якщо ви вставите код в точності так, як відображено зверху, то ви навряд чи щось побачите або почуєте. Якщо вам потрібен маленький елемент плеєра, то обов'язково використовуйте атрибут контролерів ( «audio controls»). Якщо вам треба, щоб плеєр можна було чути, але не бачити, то скористайтеся елементом автоматичного запуску ( «audio autoplay»). Або використовуйте обидва елементи.
Наша мета - змусити звук відтворюватися, коли курсор миші буде наведено на конкретний елемент (наприклад, пункт меню). І знову ж таки, на жаль, ми не можемо змусити елемент «audio» працювати за допомогою CSS, нам треба задіяти j # 097; vascript. Для того, щоб програти звук за допомогою j # 097; vascript, скористайтеся кодом:
Давайте скористаємося jQuery тому, що він значно спрощує робочий процес з виділенням і створенням подією.
Давайте зробимо так, щоб звук починав грати тоді, коли курсор миші перебував поверх конкретного елемента:
Сторінка тізера мобільного додатка Goodfoot використовує схожу техніку для вставки звуків, коли ви наводите курсор на голову снігової людини. Тут все реалізовано за допомогою впровадження нового елемента audio в DOM при кожному наведенні на персонаж:
Це можна трохи вдосконалити до підтримки формату OGG. Не думаємо, що атрибут рівня звуку буде працювати, так як ми ще ніде не зустрічали підтримки цієї функції. Все це модернізував Джеффрі Вей (Jeffrey Way):
Ми задоволені таким підходом, так як тут все працює так, як треба. Після того, як звук відтворено, він зберігається в кеш, що значно прискорює роботу в наступну завантаження.
Ще один спосіб реалізації полягає у впровадженні трьох аудіо-елементів в сторінку.
А потім слід по черзі вибір кожного з них:
Повтори і проблеми: накладання звуків
Спочатку деякі хочуть вмонтувати систему в навігаційне меню при наведенні на вкладки. Тут відразу відкривається проблема: функція .play () запускається набагато швидше і частіше, ніж ви можете прослухати кожен окремий запускається звук. Один і той же звук не може бути відтворений поверх того, який вже відтворюється. Тому наступні функції .play () не запускаються, поки не перший запущений цикл не буде закінчений.
Спочатку ми пробували скористатися функцією .pause () для того, щоб зупинити відтворення і запустити функцію знову, але це не допомогло. Пауза проводиться, але потім функція .play () не хоче запускатися заново.
Кращий спосіб, який ми знайшли - це дублювання елемента для кожного пункту меню. Таким чином кожен пункт меню буде мати власний відрізок звукового файлу, який буде відтворюватися за окремими функціями, створюючи накладення.