Сърфирайки в рунет аз попаднах в сайта на SEO оптимизатора Юсуф Губайдулин. Представайки съвети на страниците на сайта си, той бе сложил своя снимка, а под нея малък флаш плейър. Стартирането на флаш плейъра просвирва гласово съобщение, което на практика е своеобразна гаранция. Тази идея е много находчива в случай, че строите комерсиален сайт и чрез гласово съобщение вие се обърнете към бъдещите си клиенти с уверения. Изпълнението ме заинтригува и аз реших да я повторя. Идеята да я споделя с вас е причина да четете тези редове.
Еmbedded MP3 аudio рlayer за вашия сайт
Ръководството използва Audio Player Wordpress plugin от 1pixelout. Изтеглете .zip файла от този сайт. След което го разархивирайте. За бъдещия ви аudio рlayer ще ползвате два файла:
Разбираемо тук не може да ползва пряко HTML код, за което приведения пример ще ви отведе на външен сървър. Лявата част в примера показва изпълнението на Юсуф Губайдулин, а дясната показва схема за оцветяване на на аudio рlayer-а.
Ръководството използва Audio Player Wordpress plugin от 1pixelout. Изтеглете .zip файла от този сайт. След което го разархивирайте. За бъдещия ви аudio рlayer ще ползвате два файла:
- player.swf (това е audio player )
- audio-player.js (това е Javascript)
Разбираемо тук не може да ползва пряко HTML код, за което приведения пример ще ви отведе на външен сървър. Лявата част в примера показва изпълнението на Юсуф Губайдулин, а дясната показва схема за оцветяване на на аudio рlayer-а.
пример
Ръководство
За целта нека допуснем, че вашето уеб място се намира на адрес: www.мой_сайт.сom .
1. Създайте нова папка на вашия Web сървър с име "audio"
2. Качете двата изтеглени файла за бъдещия ви аudio flash рlayer (player.swf и audio-player.js)
3. Качете MP3 файла в създадената папка "audio". Това е вашето гласово обръщение в формат .mp3. Да речем, че то е с име music.mp3. MP3 трябва да бъде енкодиран в 44.1 kHz или 22.05 kHz, или 11.025 kHZ. Всяка друга честота ще бъде игнорирана от player.swf.
При създаване на гласово съобщение аз ползвах вграден микрофон на web камера и безплатната 832kB програма Fox Magic Audio Recorder. Tя в реално време енкодираше получения звуков сигнал. След upload в създадената папка audio - нещата трябва да изглеждат така:
За целта нека допуснем, че вашето уеб място се намира на адрес: www.мой_сайт.сom .
1. Създайте нова папка на вашия Web сървър с име "audio"
2. Качете двата изтеглени файла за бъдещия ви аudio flash рlayer (player.swf и audio-player.js)
3. Качете MP3 файла в създадената папка "audio". Това е вашето гласово обръщение в формат .mp3. Да речем, че то е с име music.mp3. MP3 трябва да бъде енкодиран в 44.1 kHz или 22.05 kHz, или 11.025 kHZ. Всяка друга честота ще бъде игнорирана от player.swf.
При създаване на гласово съобщение аз ползвах вграден микрофон на web камера и безплатната 832kB програма Fox Magic Audio Recorder. Tя в реално време енкодираше получения звуков сигнал. След upload в създадената папка audio - нещата трябва да изглеждат така:
- httр://www.мой_сайт.сom/audio/player.swf
- httр://www.мой_сайт.сom/audio/audio-player.js
- httр://www.мой_сайт.сom/audio/music.mp3
<script language="Javascript" src="http://www.site.com/audio-player.js"></script>
<object type="application/x-shockwave-flash" data="http://www.site.com/audio/player.swf" id="audioplayer1" height="24" width="290">
<param name="movie" value="http://www.site.com/audio/player.swf">
<param name="FlashVars" value="playerID=1&soundFile=http://www.www.site.com/music.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>
<object type="application/x-shockwave-flash" data="http://www.site.com/audio/player.swf" id="audioplayer1" height="24" width="290">
<param name="movie" value="http://www.site.com/audio/player.swf">
<param name="FlashVars" value="playerID=1&soundFile=http://www.www.site.com/music.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>
Поместване повече от един аudio flash рlayer
Можете да поместете повече от един аудио файл в папка "audio" на вашия Web сървър. Всеки аудио файл трябва да бъде с уникално име. За случая се ползват се същите файлове player.swf и audio-player.js. Нещата опират да леки корекци в кода на всеки следващ поместен аudio flash рlayer в същата страница. Пример за втори поместен аudio flash рlayer:
<script language="Javascript" src="http://www.мой_сайт.сom/audio/audio-player.js"></script>
<object type="application/x-shockwave-flash" data="http://www.мой_сайт.сom/audio/player.swf" id="audioplayer2" height="24" width="290">
<param name="movie" value="http://www.мой_сайт.сom/audio/player.swf">
<param name="FlashVars" value="playerID=2&soundFile=http://www.мой_сайт.сom/audio/bla-bla.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>
<object type="application/x-shockwave-flash" data="http://www.мой_сайт.сom/audio/player.swf" id="audioplayer2" height="24" width="290">
<param name="movie" value="http://www.мой_сайт.сom/audio/player.swf">
<param name="FlashVars" value="playerID=2&soundFile=http://www.мой_сайт.сom/audio/bla-bla.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>
При трети аudio flash рlayer в същата страница променяме "2" на "3" в HTML кода и т.н.
Задаване на цвят по избор
Според схемата на Martin Laine вие можете да оцветите вашия Web аudio flash рlayer по ваш вкус. Имате избор от 12 цвята. Схемата показва значенията на всяка от деветте опции.
Задаване на цвят по избор
Според схемата на Martin Laine вие можете да оцветите вашия Web аudio flash рlayer по ваш вкус. Имате избор от 12 цвята. Схемата показва значенията на всяка от деветте опции.
Цветови опции
-----------------------------
bg - Background color
-----------------------------
leftbg - Left background
-----------------------------
lefticon - Left icon
-----------------------------
rightbg - Right background
-----------------------------
rightbghover - оцветяване на right background при положение mouseover
-----------------------------
righticon - Right icon
-----------------------------
righticonhover - оцветяване на right icon при положение mouseover
-----------------------------
text - Text
-----------------------------
slider - Slider
-----------------------------
track - Track
-----------------------------
border - това е line surrounding the loader bar
-----------------------------
loader - Loader bar
-----------------------------
Така известните цветови опции ще добавите в HTML кода на вашия аudio flash рlayer.
От примера кодът на аudio flash рlayer под схемата има този вид:
<script language="Javascript" src="http://www.мой_сайт.сom/audio/audio-player.js"></script>
<object type="application/x-shockwave-flash" data="http://www.site/audio/player.swf" id="audioplayer1" height="24" width="290">
<param name="movie" value="http://www.site.сom/audio/player.swf">
<param name="FlashVars" value="playerID=1&
[b]bg=0x999999&
leftbg=0x000000&
lefticon=0xffffff&
rightbg=0xffffff&
rightbghover=0xcc0000&
righticon=0x000000&
righticonhover=0xcccccc&
text=0xcc0000&
slider=0xcc0000&
track=0xcccccc&
border=0xcc0000&
loader=0xffcccc&
loop=no&
autostart=no&[/b]
soundFile=http://site.сom/audio/music.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>
<object type="application/x-shockwave-flash" data="http://www.site/audio/player.swf" id="audioplayer1" height="24" width="290">
<param name="movie" value="http://www.site.сom/audio/player.swf">
<param name="FlashVars" value="playerID=1&
[b]bg=0x999999&
leftbg=0x000000&
lefticon=0xffffff&
rightbg=0xffffff&
rightbghover=0xcc0000&
righticon=0x000000&
righticonhover=0xcccccc&
text=0xcc0000&
slider=0xcc0000&
track=0xcccccc&
border=0xcc0000&
loader=0xffcccc&
loop=no&
autostart=no&[/b]
soundFile=http://site.сom/audio/music.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>
За ваше улеснение използвайте програмата Eyedropper при определяне на цветове по hexadecimal код.
Други опции
Тези опции касаят появата аudio flash рlayer при зареждане на страницата.
-----------------------------
loop - Дали audio-файлът да се повтаря автоматично. Отговор yes или no -----------------------------
autostart - Дали аudio flash рlayer да стартира автоматично без да бъде кликан. Отговор yes или no
-----------------------------
Oще примери
0 Response to "Web аudio flash рlayer"
Публикуване на коментар