Добавление звука к SVG файлам

Задача – добавить звук к существующей анимации, то есть к кнопкам запуска и остановки гоночных машинок привязать включение и отключения звука гоночных моторов.
racing car sound of racing motors

1. Добавляем звук к анимации

В шапке SVG файла необходимо добавить строку, если ее нет:
xmlns:html=”//www.w3.org/1999/xhtml”
Далее подбираем подходящий файл со звуками гоночных моторов и присоединяем его в секции <defs> с помощью парных тегов <html:audio>..</html:audio>

2. Привязываем звук к кнопкам управления

К кнопке “Start” – запуска анимации движения гоночных машинок по трассе, добавляем код начала воспроизведения звука: id=”startButton” onmouseover=”$(‘audio’).play(); $(‘audio’).loop=true;”
К кнопке “Stop” – добавляем код постановки звука на паузу при наведении курсора мышки: id=”stopButton” onmouseover=”$(‘audio’).pause(); try { $(‘audio’).currentTime=0; } catch(e) {} $(‘audio’).loop=false;”

Все файлы из архива разместите в одной папке.

⇚ Анимация SVG path – гонки автомобилей
⇛ Горизонтальный параллакс с помощью viewBox

Добавить комментарий