Існує два підходи для створення майже чого завгодно. Перший - це взятися за справу з наскоку, розробляючи від цілого до часткового, набиваючи гулі про проблеми в міру їх появи і сподіваючись, що ви у всьому розберетеся. Другий - це створити ряд простих тестів: розробляючи від приватного до цілого. перевіряючи кожен крок, перш ніж використовувати плоди своєї праці для створення остаточного, закінченого твору.
У кожного з цих двох методів є свої переваги, але другий, як правило, призводить до кращого результату. Тут я продемонструю другий підхід, в розробці початкового прототипу веб-аудиоплеера, з яким я познайомив вас в першій частині цього циклу статей.
вихідні елементи
Насамперед давайте переконаємося, що ми в принципі можемо програти аудіофайл на сторінці. Тут я використовую Трек 24 з альбому Ghosts III групи NIN під ліцензією Creative Commons:
Оскільки останні версії Firefox поряд з іншими сучасними браузерами тепер підтримують. mp 3. тут я використовую тільки цей кодек. Я розмістив елемент
Як тільки ви переконаєтеся, що аудіо працює, наступним завданням буде створення власного UI для плеєра.
Робота над поступовим поліпшенням
Доданий внизу HTML-сторінки, цей скрипт фактично скорочує наш аудіоплеєр до простого елемента
Тепер ми легко можемо встановити текст для будь-якого HTML-елемента.
Далі нам потрібно змусити кнопку реально щось робити:
Створення кнопки «Mute»
Також нам необхідно створити елементи управління для гучності звуку. Найпростіше - це зробити кнопку «Mute», яка використовує шаблон, дуже схожий на шаблон кнопки Play / Pause:
Ця функція трохи сира: коли звук включений, вона встановлює рівень гучності для аудіо в його абсолютний максимум (наскільки дозволяє система), але на даний момент це допустимо.
Створення регулятора гучності
Далі нам потрібен більш точний регулятор гучності. Очевидний кандидат для цього елемента управління UI - елемент «range».
На жаль, не існує методу setAttributes. який дозволяв би встановлювати значення декількох атрибутів одночасно. Проте, для цього ми можемо зробити досить просту функцію:
Тепер можна встановлювати атрибути для регулятора діапазону гучності за допомогою одного рядка коду:
Зауважте, що мінімальне і максимальне значення регулятора відповідають значенням функції muter ().
Далі ми додамо обробник подій до полю регулятора, встановивши гучність аудіотрека в значення регулятора всередині анонімної функції:
Тут ми стикаємося з першою серйозною проблемою: з функціональної точки зору, зниження гучності регулятора до 0 і натискання на «Mute» - це одне і теж, так що зміна стану повинно відображатися в кнопці. Як нам це зробити?
Синхронізація елементів управління
Моїм рішенням буде абстрагуватися від кнопок і дивитися на будь-які зміни в гучності самого елемента
Залишилася ще одна річ, яку потрібно виправити. Коли музичний трек закінчується, музика повинна повертатися до початку, а кнопка відтворення повинна відображати «Play» замість «Pause» або «Stop»:
Цей код передбачає, що, як тільки скрипт завантажився, всі умови виявляться ідеальними: що браузер підтримує HTML5 і всі функції API, які ми використовували, і що аудіотрек завантажився негайно ж. Але це не завжди так: наприклад, Android 2 і нижче не підтримує event. ended для аудіо. Існують способи обійти це і безліч фолбеков, які ми могли б додати, але я не буду приділяти їм увагу сьогодні.
P.S. Це теж може бути цікаво:
Не минуло й півроку з останньої зміни робочого процесу W3C, як керівництву Консорціуму надійшла пропозиція застосувати нарешті цей новий процес на ділі. І списати вже неактуальні специфікації HTML в музей, щоб вони не заплутували розробників, «прикидаючись» актуальними.
Ще один модуль CSS, про який ми розповідали, непомітно дозрів до статусу, з якого W3C радить починати повсякденне використання новинок. Властивість contain дозволяє обмежувати зміни дерева відтворення, перерисовку CSS-боксів і зміни їх розмірів в межах елемента. Тому воно так важливо ...
ДАЛІ
З Парижа (на фото), де недавно проходила зустріч робочої групи CSS, прилетіла цікава новина: властивості grid-row-gap і grid-column-gap, а також їх скорочення grid-gap ...