Синхронизация CSS-анимации с HTML5-аудио

 <audio id="heartbeat" src="heartbeat.mp3" preload="auto"> Your browser does not support the <code>audio</code> element. </audio> 

Вместо элементов управления мы используем JavaScript для управления воспроизведением. В этом примере используются кнопки для запуска и сброса трека, но с немного большей работой мы могли бы обойтись без кнопок, а также для запуска и сброса звука, когда элемент сердца щелкается или зависает.

Наш звук — это звук сердцебиения, повторенного четыре раза, и он будет звучать как наша CSS-анимация.

Согните эту мышцу

Чтобы заставить наше сердце биться, нам нужно изменить его форму от исходного, покоящегося сердца, до состояния, когда мышцы согнуты. Чтобы изогнуть сердце, мы немного уменьшим его и изменим его форму с border-radius .

Вот как будут выглядеть согнутые стили, если бы мы нуждались в их статичности вне анимации:

 .heart::before, .heart::after { background-color: orange; transform: rotate(-45deg) scale(0.8); border-radius: 70% 70% 70% 0 / 70% 70% 10% 0; } .heart::after { transform: rotate(-45deg) scale(0.8); } того .heart::before, .heart::after { background-color: orange; transform: rotate(-45deg) scale(0.8); border-radius: 70% 70% 70% 0 / 70% 70% 10% 0; } .heart::after { transform: rotate(-45deg) scale(0.8); } 

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

Анализ аудиосигнала с помощью Audacity

Audacity® — это кроссплатформенное программное обеспечение с открытым исходным кодом для записи и редактирования звуков. Он прост в использовании, и даже если у вас нет опыта работы с подобным программным обеспечением для редактирования аудио или видео, вам не потребуется много усилий для получения необходимой информации.

Откройте ваш аудиосигнал в Audacity, и он автоматически покажет вам звуковую форму. В большинстве случаев этого будет достаточно, чтобы вы могли определить, где начинаются и заканчиваются определенные части звука, глядя на форму сигнала. Редко мы получаем сигнал, в котором лучше помогает какой-то другой режим просмотра спектрограммы, но в этом случае мы можем переключаться между различными режимами через выпадающее меню рядом со спектрограммой.

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

В нашем случае сердцебиения у нас есть 4 разных сердцебиения, и это легко распознать, посмотрев на форму волны. Нам нужно записывать каждое сердцебиение, когда оно начинается, заканчивается и когда оно находится в согнутом состоянии. Чтобы упростить эту задачу, мы используем приложение для работы с электронными таблицами, в котором мы фиксируем сердцебиения и их время в секундах.

Перевод аудио синхронизации в ключевые кадры

Как только у нас есть время в секундах, мы используем некоторую математику, чтобы нормализовать длину звука к обозначению длины 100%, которое мы используем в анимации (умножить на 100 и разделить на общее время звука). Вот как мы получаем проценты ключевых кадров, а также то, какой стиль следует применять к конкретному ключевому кадру, должно ли сердце быть расслаблено или согнуто.

 @keyframes heartbeats-before { 3% { background-color: red; transform: rotate(-45deg) scale(1); border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0; } 8.2% { background-color: orange; transform: rotate(-45deg) scale(0.8); border-radius: 70% 70% 70% 0 / 70% 70% 10% 0; } 13.7% { background-color: red; transform: rotate(-45deg) scale(1); border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0; } 25% { background-color: red; transform: rotate(-45deg) scale(1); border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0; } 30% { background-color: orange; transform: rotate(-45deg) scale(0.8); border-radius: 70% 70% 70% 0 / 70% 70% 10% 0; } 36% { background-color: red; transform: rotate(-45deg) scale(1); border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0; } 44.4% { background-color: red; transform: rotate(-45deg) scale(1); border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0; } 49.6% { background-color: orange; transform: rotate(-45deg) scale(0.8); border-radius: 70% 70% 70% 0 / 70% 70% 10% 0; } 56.4% { background-color: red; transform: rotate(-45deg) scale(1); border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0; } 66.7% { background-color: red; transform: rotate(-45deg) scale(1); border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0; } 71.8% { background-color: orange; transform: rotate(-45deg) scale(0.8); border-radius: 70% 70% 70% 0 / 70% 70% 10% 0; } 77% { background-color: red; transform: rotate(-45deg) scale(1); border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0; } } 

 .heart.active::before { animation: heartbeats-before 5.85s linear 0 1; }