zura-blog 035Привіт всім відвідувачам Zura-Blog, сьогодні до вашої уваги, хочу запропонувати ще одну чудову програму, яка безперечно буде корисною для ваших сайтів.

Програма називається web audio +, і вона допоможе створити код, завдяки якому на вашому сайті будуть відображатись красиві кнопки.

Кнопки призначені для програвання аудіоелементів, власне програма сама створить код кнопок, кнопки можна створити любого кольору, і вони будуть вписуватись в любу кольорову гамму сайту.

Самих дизайнів кнопок також в програмі є декілька, для того щоб кольорові кнопки відображались на сайті, вам не потрібно бавитись з спеціальними графічними файлами які призначені для створення кнопок, та й з кодами також щоб програвалась аудіокомпозиція, програма все зробить за вас.

Власне що потрібно зробити щоб створити кнопки для програвання аудіоелементів, працюючи з програмою web audio + всього навсього скачати, встановити і запустити програму, після, коли програма відкриється, перед вами зявиться інтерфейс програми,  злівої сторони збоку до вашої уваги пять кроків (step 1, step 2, step 3,  step 4, step 5), роблячі які ви зможити додати красиві кнопки для програвання аудіокомпозицій для свого сайту.

step 1 — перший крок, ставимо галочку, потрібно вибрати композицію, або аудіофайл, формати  mp3, wav, або записати власний голосовий коментар.

web audio 1

⇑ставимо галочку

step 2   другий крок, вказуємо шлях виставивши галочку на Record sound або Load from file.

Record sound якщо виставити галочку на цю опцію, тоді ми зможимо записати власні голосові коментарі, клацаємо на

  1. кнопка rec → почнеться ваш аудіозапис  

  2. кнопка stop → запис припиниться

  3. кнопка play → ваш аудіозапис буде продовжуватись з того місця на якому ви його зупинили, і ви прослухавши його зможити визначити чи він вас влаштовує, чи створити новий запис.

web audio 2

 

 

Load from file (mp3 wav) якщо виставити галочку на цю опцію, тоді ми вибираємо бажану аудіокомпозицію, точніше якщо ми хочимо додати аудіокомпозицію до нашого сайту, то вона вже повинна знаходитись в папці сайту, в спеціальній папці призначеній для аудіокомпозицій.

Хоча в принципі не має значення, може бути аудіокомпозиція і в кореневій папці сайту, програма сама пропише посилання, і аудіокомпозиція після клацання на кнопку всерівно буде програватись. Отож спочатку потрібно додати аудіокомпозицію до вашого сайту, а потім програмі вказати шлях до неї.

Ну а коли у вас була вже присутня аудіокомпозиція на сайті, і програвалась за допомогою стандартного коду плеєра, ви можити поміняти цей код, на код з кнопками від програми web audio +.

Для того щоб композиція програвалась при клацанні на кнопку, потрібно всього навсього поставити галочку біля  Load from file (mp3 wav), і клацнути на кнопку “Next”,  далі клацаємо на кнопку “open”,  і з вкладки вказуємо програмі шлях до потрібного аудіофайла, клацаємо “Відкрити”, і в верхньому полі в рамці з написом “Sound file information” появиться слідуюча інформація, “де знаходиться файл”, “час програвання аудіокомпозиції”, і “розмір файлу”.

web audio 3

step 3   третій крок, вибір дизайну кнопки

Якщо така інформація присутня, тоді клацаємо на кнопку “next” і переходимо на наступний крок, для того щоб вибрати дизайн кнопок. В верхній панелі присутньо шість дизайнів кнопок, вибираємо любий із них, кнопок до речі три, вони дадуть можливість програвати композицію, ставити композицію на паузу, і повністю зупиняти композицію.

web audio

Можна вибрати і одну кнопку для відображення на сайті, для цього потрібно виставити галочку біла слів “Play/Stop only”, переклад означає “тільки програвання і зупинка”, а це значить що буде відсутня функція “Пауза”.

web audio 4

Нижче “Button color” — там вибираємо колір для кнопки, “Background color” — вибираємо фон для кнопки, якщо проігнорувати фон, тоді ділянка яка буде призначена для кнопок на сайті буде оптікати кнопки білим кольором. Якщо у вас сторінка на яку ви додаєте кнопки білого кольору, тоді вackground color вам не потрібен, якщо інший колір, тоді підбираємо потрібний, щоб кнопки вписувались в кольорову палітру сайту.

step 4   отримуємо код кнопки

Коли все виставлено, клацаємо “Copy HTML Text” далі клацаємо на кнопку “next”, переходимо на наступний крок, в якому в верху програма створить код для кнопок, а нижче слів “Save to” шлях де програма буде зберігати файл “AudioPlayer.swf”  з розширенням .swf, міняєте шлях на потрібний, або нічого не робите, але потім обовязково перенесіть файл AudioPlayer.swf, в папку вашого сайту. Зліва виставляємо ширину і довжину для кнопок.

Наприклад 200х75

web audio 5

step 5   пятий крок, створюємо кнопки

Далі клацаємо “Make”, і очікуємо поки програма не створить файл, після чого клацаємо на кнопку “Back”, якщо не зберігли код спочатку клацанням “Copy HTML Text”, тоді клацнувши на кнопку “Back” вертаємось назад щоб скопіювати код, і вставити цей код в місце яке ми вибрали на сторінці сайту для кнопки.

Кнопка “Back” надає можливість все поміняти при необхідності, або повернутись до одного з кроків і зробити зміни.

Якщо не будуть відображатись кнопки, перенесить щойно створений програмою файл AudioPlayer.swf в папку сайту, в коді можливо вам прийдеться поміняти посилання, і також в коді можна поміняти і розмір кнопок.

Наприклад код 

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0″ width=”200″ height=”73″>
<param name=”movie” value=”C:\Users\Admin\Desktop\AudioPlayer.swf”>
<param name=”quality” value=”high”>
<embed src=”C:\Users\Admin\Desktop\AudioPlayer.swf” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash”width=”200″ height=”73″></embed>
</object>

Зрозуміло що в рядку коду <embed src=”C:\Users\Admin\Desktop\AudioPlayer.swf” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” текст  C:\Users\Admin\Desktop\AudioPlayer.swf — вказує на посилання яке знаходиться на компютері, і звичайно що потрібно виставити посилання яке повинно вказувати на папку сайту щоб кнопки відобразились, і звісно що в папку сайту потрібно помістити файл AudioPlayer.swf.

Але в цілому якщо зразу вказувати напрямок на папку сайту, тоді нічого в коді міняти не потрібно, програма сама все пропише. Ну а потім просто переносите папку сайту на хостинг через FTP–клієнт, або якщо у вас вже є сайт на хостингу, тоді заходите на хостиг, і вказуєте аудіокомпозицію, яка буде у вас вже розміщена на хостингу.

Програма сама виставить посилання, вам всього навсього потрібно скопіювати  код, який створиться і буде знаходитись в програмі  від  <object  і до </object>, і вставити цей код в тому місці сторінки вашого сайту, де ви би хотіли бачити кнопки.

Ashampoo_Snap_2016.02.05_18h52m10s_016_

Після збереження і перезапуску сторінки, у вас мають зявитись кнопки, клацнувши на яку повинна початись програвати аудіокомпозиція. Ну і в принципі все, нижче відеоматеріал, як створити кнопки з програмою  web audio +, і найближчим часом буде вказаний шлях, звідки можна буде скачати цю програму.


Нижче ви маєте можливість переглянути на відео як створити кнопки для програвання аудіокомпозицій на сайті  з програмою web audio +

user_97