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

Original author: Mary Lou
  • Translation


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

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

Compact Cassette, Wikipedia

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



Изображение кассеты от 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!), и только супер-фанское диско допускается проигрывать! :)

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

Скачать исходные файлы
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 99

    +12
    Еще бы скин с МК-60 прикрутить, чтобы по-настоящему ностальгировать.
      +37
      Перемотка нереалистичная, надо чтобы один вал быстро вертелся, а другой медленно, если количество плёнки неодинаковое.
      И чтобы плёнку зажёвывало.
        +2
        И карандаш сразу пригодится…
        Таких кассет у нас небыло…
          0
          А можно было бы пойти еще дальше и сделать все как на пленочном «Дельфине»
          0
          Её и так зажёвывает при комбинации habrahabr.ru/post/147682/#comment_4980974 и перемотки назад
        +9
        За перевод респект, за КИНО двойной респектище! За ностальгию на второй стороне тоже спасибо!

        Только почему кассета такая короткая? :D Обычно хотя бы 30 минут сторона была, 45 или 60…
          +5
          Меня сейчас побьют и мне кажется у меня проф-деформация, но первое, на что я обратил внимание на регулятор, с этой текстурой:

          image

          Она вращается вместе с регулятором, но это же отражения, они отражают источники света вокруг, они не должны вращаться, разве что только немного подрагивать при прокрутке ручки.
            +1
            Согласен. Кстати, был бы полный оргазм, если бы они не только подрагивали из-за шероховатости поверхности, но и немного искажались от якобы слегка искривленной оси регулятора 8)
              +1
              плюс один. текстуру не крутить, а подрагивать нужно.
            +10
            Хорошо придумано. Немного допилить нужно и наверно добавить карандаш для перемотки))
              +16
              И возможность выламывать защиту от записи и вставлять бумажки туда.
                +3
                Я вставлял кусочек ластика, так как жёваная бумага вываливалась-)
                  0
                  Так режим редактирования нужно же было ненадолго совсем включать, а потом снова только чтение.
                    +1
                    Были постоянные кассеты — «перезаписываемые» -)
                    • UFO just landed and posted this here
                        +1
                        Были лицензионные, которые жалко было перезаписывать. К примеру, помню Biohazard «State of The World Address»
                          0
                          вопрос видимо был были ли кассеты которые нельзя было перезаписывать, как например обычные CD. у кассет для этого была защита, углубления по верхней стороне с двух сторон, на чистых покупных кассетах там были оставлены специальные заглушки, которые можно было отломать, если хотелось защитить кассету от случайной перезаписи.
                    +1
                    Черт, где вы раньше были…
                    +7
                    А еще вспомнилось на плохих кассетах выгибание пластины, которая прижимает ленту к считывающей головке, натирание графитовым стержнем пленок внутри кассеты для лучшего скольжения, протирание этой самой головки спиртом или тройным одеколоном… Я динозавр.
                      0
                      Этиловым спиртом или тройным одеколоном протирать как раз было не желательно. Вот метиловым — самое то:)))
                      А в середине 90-х уже появились в продаже специальные жидкости для чистки головок… И такой аксессуар, как чистящая кассета…
                    +2
                    Не забываем лак для ногтей, мало ли что может случится :)
                    0
                    Лента почему то в катушку идет, а вроде должна накручиваться ))
                      0
                      Да, не в ту сторону)
                        0
                        Хотя нет, верх-ногами кассету представил, всё ок)))
                      +15
                      А где же потрескивание, где шипение? Где завал в верхней части АЧХ? Где же эффект растянутой ленты?)))
                        0
                        Туда же — эффект перевернутой ленты.
                        0
                        Видать это просто полоса у корпуса… сори ))
                          +4
                          Мне почему-то сразу вспомнился запах маминого лака, которым мы заклеивали порваные ленты :)
                            +1
                            А я скотчем или изолентой склеивал :-) В итоге на месте склейки, бывало, заедало.
                            +4
                            Соотношение скоростей вращения в процессе перемотки/прослушивания должно меняться. Мелочь, но добавит реалистичности.
                              +1
                              ну и соотношение скоростей вращения бобин тоже не верное). сразу в глаза кинулось
                                0
                                блин. опоздал. сорри(
                                +12
                                если хочется добиться большей реалистичности — световые отражения на ручке громкости не должны двигаться. должна двигаться только точка.
                                  +1
                                  На моём плейере Sony Walkman можно было включить воспроизведение в ускоренном темпе, если во время воспроизведения слегка нажать кнопку перемотки вперед.

                                  На советском магнитофоне «Электроника что-то-там» аналогичная фича активировалась при лёгком нажатии кнопки «Стоп».


                                    +2
                                    На моей деке «Вега» тож такая фича есть, используется для поиска следующей песни. При воспроизведении нажимаешь на перемотку, головка не уходит от плёнки, начинается перемотка, получается ускоренное воспроизведение. Перематывается до обнаружения тишины, затем автоматом отматывает чуток назад (дабы компенсировать инерционность моторов) и начинается уже нормальное воспроизведение.
                                      0
                                      Разбирал недавно плеер, пытаясь починить, так вот: там прижимной валик поднимается и пленка легче мотается, в итоге скорость проигрывания возрастает.
                                        0
                                        Этот механизм с прижимным валиком как раз и контролирует точную скорость, т.к. по-другому равномерную скорость воспроизведения на всей длине не задать.
                                      0
                                      В опере не работает по-нормальному :(
                                        0
                                        Угу, опера пока не поддерживает rotate 3d.
                                          +1
                                          в опере вообще что-нибудь работает по-нормальному?
                                        +7
                                        Но если же вы имеете представление, что такое аудио-кассеты, то скорее всего вы принадлежите к старшему поколению, динозаврам, которые знают, что объединяет карандаш и аудио-кассету.

                                        Я в свои 18 уже, оказывается, динозавр :)
                                        • UFO just landed and posted this here
                                            +13
                                            Если дослушать до конца, то плёнка выходит за границы кассеты :-(

                                            FF 13.0.1
                                              +10
                                              Да у Вас, батенька, кассета повышенной емкости…
                                                +1
                                                Unhandled exception: Tape overflow (Side A)
                                                    ...
                                                
                                                +8
                                                Кассета при переворачивании не имеет толщины.
                                                  0
                                                  Спасибо, прослезился.
                                                    0
                                                    Нет, все же не зря я последние несколько дней смотрел на кассетные деки разных производителей!
                                                    А ведь нам всем так хочется некоего действия при прослушивании музыки… Будь-то вращение ручки радиоприемника и шипение волн, или заправка ленты в лентопротяжный механизм.
                                                      0
                                                      Надеюсь, карандаш не понадобится?
                                                        +2
                                                        Вот только собрался попробовать, думаю «хорошо бы Цой на этой кассете был»… Спасибо, оправдали ожидания :-)

                                                        Теперь ещё и VHS надо бы сделать.
                                                          +3
                                                          И грозного дядьку:
                                                            +1
                                                            «Грязного» вы хотели сказать?
                                                          –10
                                                          А я сижу и плачу, но не от радости, а от того, что есть же флэш :(
                                                          Во флэше, если есть порезанный скин, на этот плеер ушел бы час дел, полная кросбраузерность, меньшие тормоза и т.д. и т.п…
                                                            +11
                                                            и да, я понимаю, что смерть флэша — это неизбежно…
                                                              +3
                                                              хабр удивительное место! так испортили карму за некатегоричный, нейтральный комментарий, я в экзальтированном экстазе! :)
                                                                +3
                                                                Ну ок, а есть ещё С++ и OpenGL. Там вообще было бы круто и был бы не псевдообъём как во Флеше, а реально 3d и можно было бы крутить вокруг. И что теперь? Нихрен об этом говорить в топике о html5?
                                                                • UFO just landed and posted this here
                                                                    +3
                                                                    О том и речь. При чём тут Flash вообще?
                                                                    • UFO just landed and posted this here
                                                                        0
                                                                        Да потому что задолбали. Окей на флеше можно такое сделать. Ещё можно сделать на Unity — это круче флеша. Ещё можно на Асме сделать. А ещё круче — пойти в магазин и купить обычный плеер — вот уж точно будет похоже на плеер, чем что угодно, сделанное на html5, flash, unity и asmе.
                                                                        Ну так нахер об этом в каждом топике про html5 писать? Ещё пару подобных упоминаний о Флеше и вместо того, чтобы объяснять хоть что-то будем просто нахрен слать
                                                                        • UFO just landed and posted this here
                                                                            0
                                                                            Ох. Флешанутый. Ясно тогда. Ну ничего, через 5 лет ты тоже будешь на html5 писать.
                                                                            • UFO just landed and posted this here
                                                            • UFO just landed and posted this here
                                                              +2
                                                              Между песнями на середине кассеты срабатывает вкл/выкл, явно бага.
                                                                0
                                                                Это как раз эффект реалистичности, когда кассета не вся сразу записывается (в домашних условиях конечно) то обычно слышно как нажимали кнопку остановки записи, но это хотя как нажимать ещё ;)
                                                                  +1
                                                                  теория хороша, только вот там обычно был слышен начальный жмяк, но никак не целиком всё от останова до нового запуска =)
                                                                +1
                                                                Очень классно!

                                                                PS: Я надеялся увидеть тонкости реализации.
                                                                  0
                                                                  А ещё нужна возможность стереть пленку, когда то убил таким образом альбом Скорпионс :(
                                                                    0
                                                                    Как изменились времена-то. Сейчас убил случайно — и не паришься ))
                                                                      0
                                                                      Более того, сейчас все копии идентичны! ранее же было понятие вторичной копии, третичной и т.д.
                                                                        +1
                                                                        Я пару месяцев назад форматнул 900 гигов lossless и не жужжал…
                                                                      –1
                                                                      Название темы не совсем подходит к её содержанию, где тут создание то?
                                                                        0
                                                                        Вот кассета клевая. И вообще. У Manicho как-то не очень вышло, хоть и уважаемый мной дизайнер.
                                                                          0
                                                                          Согласен, ни в один кассетник Manicho'вское изделие не вошло бы — нет нужных характерных четырех отверстий.
                                                                          0
                                                                          Был бы благодарен описанию использованных технологий для создания данной демки.
                                                                            +1
                                                                            Молодцы. Только вот металлический отблеск на реле громкости не должен крутиться. Крутиться должна только точка и текстура.
                                                                              0
                                                                              Реле громкости? =)
                                                                              0
                                                                              клево, ностальгия :)
                                                                                +2
                                                                                Музыка из vk + это штука = vkassete.ru

                                                                                iMac-Bakyt:~ bakyt$ whois vkassete.ru
                                                                                % By submitting a query to RIPN's Whois Service
                                                                                % you agree to abide by the following terms of use:
                                                                                % http://www.ripn.net/about/servpol.html#3.2 (in Russian)
                                                                                % http://www.ripn.net/about/en/servpol.html#3.2 (in English).
                                                                                
                                                                                No entries found for the selected source(s).
                                                                                
                                                                                Last updated on 2012.07.13 15:28:42 MSK
                                                                                  0
                                                                                  Хе-хе:
                                                                                  iMac-Bakyt:~ bakyt$ whois vkassete.ru
                                                                                  % By submitting a query to RIPN's Whois Service
                                                                                  % you agree to abide by the following terms of use:
                                                                                  % http://www.ripn.net/about/servpol.html#3.2 (in Russian)
                                                                                  % http://www.ripn.net/about/en/servpol.html#3.2 (in English).
                                                                                  
                                                                                  domain:        VKASSETE.RU
                                                                                  nserver:       ns1.nameself.com.
                                                                                  nserver:       ns2.nameself.com.
                                                                                  state:         REGISTERED, DELEGATED, VERIFIED
                                                                                  person:        Private Person
                                                                                  registrar:     REGTIME-REG-RIPN
                                                                                  admin-contact: http://whois.webnames.ru
                                                                                  created:       2012.07.13
                                                                                  paid-till:     2013.07.13
                                                                                  free-date:     2013.08.13
                                                                                  source:        TCI
                                                                                  
                                                                                  Last updated on 2012.07.13 16:38:42 MSK
                                                                                    +1
                                                                                    Если что-то выгорит с автором поделиться не забудьте.
                                                                                  0
                                                                                  HTML5 — скажем нет кроссбраузерности. Не забывайте писать в каких браузерах работает. В опере (последней) не работает вращение валиков совершенно, можно видеть только перемотку на rew/ff, при нажатии на play ничего не происходит.
                                                                                    0
                                                                                    Для приятности можно добавить реакцию громкости на скролл.
                                                                                    • UFO just landed and posted this here
                                                                                      • UFO just landed and posted this here
                                                                                        +1
                                                                                        а где кнопка rec, которую по пьяни нечаянно нажимаешь и в дырках песни? ;)
                                                                                          0
                                                                                          Ваша страничка в сложных отношениях с Хромом (об ишачке даже баюсь заикнуться).
                                                                                            +1
                                                                                            rssradio.ru/ Еще дальше вглубь времен. Теплый ламповый звук…
                                                                                              0
                                                                                              Это фигня, мне мама говорила что я в 2 года бабины переставлял и заправлял. Тогда это был 1992 или 1993 год.
                                                                                                0
                                                                                                Как-то резко толщина лёнки растёт. Кажется что прыгает.
                                                                                                  +2
                                                                                                  Эхх… романтика. Привезет бывало папаня касет для БК0010 тот что кнопочки под пленкой и с Фокал-ом. А там на них, игры, игры такие что часами висишь. Но перед этим берешь вату, одеколон или спирт и смазываешь головку. Достаешь свою любимую минусовую отвертку и контролируешь звучание процесса загрузки игры, если че не так, то сразу подкручиваешь тот самый заветный болтик. Романтика…
                                                                                                    +1
                                                                                                    А где винтик для регулировки положения головки?
                                                                                                      0
                                                                                                      Для ностальгии — продается на ибее плеер в виде кассеты, принимает карточку эсди на несколько гигов, имеет гнездо для наушников а также магнитную головку на месте окна с пленкой — можно вставить в магнитофон и слушать «кассету». стоит 13 зеленых.
                                                                                                        0
                                                                                                        а есть ссылка или хотя бы английское название?
                                                                                                          0
                                                                                                          рецепт создания поискового запроса
                                                                                                          ищем плеер — player
                                                                                                          c форматом mp3
                                                                                                          в форме кассеты — cassette
                                                                                                          и входом для карты памяти — sd (sd/mmc)
                                                                                                            0
                                                                                                            Спасибо! Зануда!
                                                                                                        0
                                                                                                        А еще заметил что кассета выглядит плоской когда производится несколько нажатий с малым интервалом на кнопку switch :), как кредитная карта :)

                                                                                                        Only users with full accounts can post comments. Log in, please.