Web аudio flash рlayer

Dr. Epstein · Август 16, 2008

Сърфирайки в рунет аз попаднах в сайта на SEO оптимизатора Юсуф Губайдулин. Представайки съвети на страниците на сайта си, той бе сложил своя снимка, а под нея малък флаш плейър. Стартирането на флаш плейъра просвирва гласово съобщение, което на практика е своеобразна гаранция. Тази идея е много находчива в случай, че строите комерсиален сайт и чрез гласово съобщение вие се обърнете към бъдещите си клиенти с уверения. Изпълнението ме заинтригува и аз реших да я повторя. Идеята да я споделя с вас е причина да четете тези редове.

Еmbedded MP3 аudio рlayer за вашия сайт

Ръководството използва Audio Player Wordpress plugin от 1pixelout. Изтеглете .zip файла от този сайт. След което го разархивирайте. За бъдещия ви аudio рlayer ще ползвате два файла:

* player.swf (това е audio player )

* audio-player.js (това е JavaScript)

Трябва да разполагате с място на Web сървър, където да качите тези файлове.

Разбираемо тук не може да ползва пряко HTML код, за което приведения пример ще ви отведе на външен сървър. Лявата част в примера показва изпълнението на Юсуф Губайдулин, а дясната показва схема за оцветяване на на аudio рlayer-а.

пример

http://pics.softvisia.com/design/pics/7243/1624893971.PNG

Ръководство

За целта нека допуснем, че вашето уеб място се намира на адрес: 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

Следващата стъпка е да поместите HTML кода на този player в Web страница, където искате да се появи. В случая страницата с примера. Променете URL-те (адресите) според вашите имена в приведения код.

</object>

Поместване повече от един аudio flash рlayer

Можете да поместете повече от един аудио файл в папка "audio" на вашия Web сървър. Всеки аудио файл трябва да бъде с уникално име. За случая се ползват се същите файлове player.swf и audio-player.js. Нещата опират да леки корекци в кода на всеки следващ поместен аudio flash рlayer в същата страница.

Пример за втори поместен аudio flash рlayer:

</object>

При трети аudio flash рlayer в същата страница променяме "2" на "3" в HTML кода и т.н.

Задаване на цвят по избор

Според схемата на Martin Laine вие можете да оцветите вашия Web аudio flash рlayer по ваш вкус. Имате избор от 12 цвята. Схемата показва значенията на всяка от деветте опции.

http://pics.softvisia.com/design/pics/7243/121063721.GIF

Цветови опции

-----------------------------

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 под схемата има този вид:

<param name="FlashVars" value="playerID=1&

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&

soundFile=http://www.мой_сайт.сom/audio/music.mp3">

</object>

За ваше улеснение използвайте програмата Eyedropper при определяне на цветове по hexadecimal код.

Други опции

Тези опции касаят появата аudio flash рlayer при зареждане на страницата.

-----------------------------

loop - Дали audio-файлът да се повтаря автоматично. Отговор yes или no

-----------------------------

autostart - Дали аudio flash рlayer да стартира автоматично без да бъде кликан. Отговор yes или no

-----------------------------

Забележка

Аudio flash рlayer под снимката се различава от аudio flash рlayer под схемата в примера. Първият има възможност за регулиране на силата на звука и винаги стартира в средно ниво. Той само 4кB по-голям по обем.

Това ръководство е за лично ползване. То е без гаранция и поддръжка. Този материал може да ползва според условията на Creative Commons license.

http://pics.softvisia.com/design/pics/7243/f_tagm_f2cf859.png

How to Embed MP3 Audio Files In Web Pages With Google or Yahoo! Flash Player

Влез

Web аudio flash рlayer

Препоръчан пост

Dr. Epstein

Link to comment

Сподели другаде

Разгледай

Какво ново?