Создаем кассетный магнитофон при помощи HTML5 Audio
Если вы не знаете, что такое кассета, то вы, вероятно, родились в эпоху хай-тэк, эпоху, которая, несомненно, является интересной и новаторской. Но если же вы имеете представление, что такое аудио-кассеты, то скорее всего вы принадлежите к старшему поколению, динозаврам, которые знают, что объединяет карандаш и аудио-кассету. :)
Кассета была изобретена 50 лет назад, так что пришло время праздновать:
«В 1962 году компания Philips изобрела новый формат аудио-кассеты, вышедший на рынок в Европе в августе 1963 года (на Berlin Radio Show), и в США (под брендом Norelco) в ноябре 1964 года, под названием «компакт-кассета».
Так как старомодный кассетный магнитофон уже практически исчез, мы хотели бы почтить его память поделившись с вами способом создания старого магнитофона с использованием HTML5 аудио. Это всего лишь эксперимент, идея заключается в имитации поведения кассетного магнитофона (воспроизведение, стоп, перемотка назад, перемотка вперед и смена стороны) используя возможности HTML5 аудио. Магнитная лента внутри будет изменяться соответствующим образом. Это далеко не идеальная имитация классической кассеты, это просто забавный эксперимент. Вероятно, вы найдете много ошибок!
Изображение кассеты от Mauricio Estrella можно найти здесь: Cassette – PSD File by Mauricio Estrella [2]
Звуковые эффекты от Pogotron на Freesound.org: Tape Recorder.wav by Pogotron [3]
Для регулировки громкости мы использовали отличный плагин KnobKnob jQuery plugin от Martin Angelov [4].
Иконки, которые мы используем для элементов управления плеером из Font Awesome [5] от Dave Gandy и мы использовали Fontello [6] для создания собственного набора. Font Awesome используется под лицензией CC BY 3.0 [7].
Мы очень надеемся, что вам понравится это маленькое путешествие во времени и у вас появится чувство ностальгии :)
Обратите внимание, что этот пример экспериментальный и создан для удовольствия. Там нет альтернативного варианта для старых браузеров (irony!), и только супер-фанское диско допускается проигрывать! :)
Демонстрация [8]
Автор: webmasters_by
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/veb-razrabotka/11324
Ссылки в тексте:
[1] Compact Cassette, Wikipedia: http://en.wikipedia.org/wiki/Compact_Cassette#History
[2] Cassette – PSD File by Mauricio Estrella: http://manicho.deviantart.com/art/Cassette-PSD-File-86548493
[3] Tape Recorder.wav by Pogotron: http://www.freesound.org/people/Pogotron/sounds/61075/
[4] KnobKnob jQuery plugin от Martin Angelov: http://tutorialzine.com/2011/11/pretty-switches-css3-jquery/
[5] Font Awesome: http://fortawesome.github.com/Font-Awesome/
[6] Fontello: http://fontello.com/
[7] CC BY 3.0: http://creativecommons.org/licenses/by/3.0/
[8] Демонстрация: http://www.webmasters.by/images/articles/webprogramm/cassette-player-with-html5-audio/index.html
[9] Скачать исходные файлы: http://tympanus.net/Development/CassettePlayer/CassettePlayer.zip
Нажмите здесь для печати.