Создаем кассетный магнитофон при помощи HTML5 Audio

в 20:01, , рубрики: Веб-разработка

Создаем кассетный магнитофон при помощи HTML5 Audio

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

Кассета была изобретена 50 лет назад, так что пришло время праздновать:

«В 1962 году компания Philips изобрела новый формат аудио-кассеты, вышедший на рынок в Европе в августе 1963 года (на Berlin Radio Show), и в США (под брендом Norelco) в ноябре 1964 года, под названием «компакт-кассета».

Compact Cassette, Wikipedia

Так как старомодный кассетный магнитофон уже практически исчез, мы хотели бы почтить его память поделившись с вами способом создания старого магнитофона с использованием HTML5 аудио. Это всего лишь эксперимент, идея заключается в имитации поведения кассетного магнитофона (воспроизведение, стоп, перемотка назад, перемотка вперед и смена стороны) используя возможности HTML5 аудио. Магнитная лента внутри будет изменяться соответствующим образом. Это далеко не идеальная имитация классической кассеты, это просто забавный эксперимент. Вероятно, вы найдете много ошибок!

Создаем кассетный магнитофон при помощи HTML5 Audio

Изображение кассеты от Mauricio Estrella можно найти здесь: Cassette – PSD File by Mauricio Estrella
Звуковые эффекты от Pogotron на Freesound.org: Tape Recorder.wav by Pogotron

Для регулировки громкости мы использовали отличный плагин KnobKnob jQuery plugin от Martin Angelov.

Иконки, которые мы используем для элементов управления плеером из Font Awesome от Dave Gandy и мы использовали Fontello для создания собственного набора. Font Awesome используется под лицензией CC BY 3.0.

Мы очень надеемся, что вам понравится это маленькое путешествие во времени и у вас появится чувство ностальгии :)

Обратите внимание, что этот пример экспериментальный и создан для удовольствия. Там нет альтернативного варианта для старых браузеров (irony!), и только супер-фанское диско допускается проигрывать! :)

Демонстрация

Скачать исходные файлы

Автор: webmasters_by

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js