Здравствуйте, сегодня поговорим о том, как встроить микрофон на ваш сайт для записи голоса посетителя.
Скачать исходники для статьи можно ниже
Для чего это нужно?
Недавно я провел на своем сайте первый конкурс и хотелось бы, чтобы выигравшие посетители смогли оставить свои торжественные возгласы, крики радости!
Полазив по интернету наткнулся на один интересный сервис – http://vocaroo.com
Он предлагает запись голоса на основе flash плеера.
Для вставки его на свой сайт предлагается использовать iframe:
<iframe src="http://vocaroo.com/?minimal" width="525" height="450" frameborder="0"></iframe><br>Powered by <a href="http://vocaroo.com" title="Voice Recorder">Vocaroo Voice Recorder</a>
Вот как это будет выглядеть:
После записи голоса появится ссылочка:
После нажатия на нее увидим следующее:
То есть вы сможете поделится данной записью следующими 3-мя способами:
1. Дана ссылка на запись, которую можно прослушать непосредственно на сайте vocaroo.com, если вы перейдете по ней.
2. Есть кнопка Embed, при нажатии на которую вам предложат код:
Если вставить данный код на сайт,то получится кнопочка для прослушивания:
3. Отправить запись по email
Нажимаем кнопку Email и открывается следующая форма отправки:
Единственный минус то, что запись может перезаписать другой пользователь.
Поэтому данный плеер-диктофон можно использовать следующим образом – после записи пользователя своего возгласа, крика счастья попросить его отправить вам ссылку на запись или код кнопки с записью или отправить запись вам по почте, то есть поделится ее с вами.
А вы уже разместите данную запись на своем сайте.
PS: Также сайт vocaroo.com предлагает плеер-игрушку, которая не имеет возможность сохранить запись или поделится ее с другими.
Для вставки ее на сайт предлагается использовать следующий код:
<object width="220" height="140"><param name="movie" value="http://vocaroo.com/mediafoo.swf?playMediaID=0&autoplay=0"></param><embed src="http://vocaroo.com/mediafoo.swf?playMediaID=0&autoplay=0" width="220" height="140" pluginspage="http://get.adobe.com/flashplayer/" type="application/x-shockwave-flash"></embed></object><br>Powered by <a href="http://vocaroo.com" title="Voice Recorder">Vocaroo</a>
После вставки данного кода на свой сайт вы получите следующий плеер:
