Как вставить аудио с помощью Web Audio Plus


Игорь Козлов | 2011-10-06 | 29 комментариев

Как вставить аудио на сайт, на блог?

Вообще для блогов WordPress эта проблема решается с помощью плагина Audio Player. Плагин прост, легко настраивается поэтому и пользуется популярностью.

Однако, если бы нам пришлось вставить аудио не в пост блога, а на отдельную страницу, например, на страницу подписки, (пример здесь) Audio Player нам бы не помог.

Какой же альтернативный вариант?

Самый простой способ — это воспользоваться программой Web Audio Plus, которая может создать из mp3 — файл swf, а также — необходимый код для его размещения.

Вот как выглядят кнопки Web Audio Plus (нажмите)

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

Итак, давайте по порядку, разберемся:

Как вставить аудио с помощью Web Audio Plus на отдельную страницу сайта

Пошаговая инструкция

1. Сначала нужно скачать саму программу Web Audio Plus.

2. Затем инсталлируете её.

3. Запускаете, у вас откроется вот такое окно:

Как вставить аудио с помощью Web Audio Plus

Одно предназначено для того, чтобы вы выбрали: будете записывать файл или откроете уже существующий. В нашем случае выбираем Load from file.

4. Жмем next и переходим в следующее диалоговое окно для загрузки файла с компьютере. Жмем open — выбираем лучшее качество.

Как вставить аудио с помощью Web Audio Plus

5. Опять next. Следующее окно — это настройки внешнего вида плеера. Цвет, размеры, вид кнопок.

Как вставить аудио с помощью Web Audio Plus

Здесь все просто, разберетесь методом клика.

6. Следующее окно — сам момент создания кода для вставки плеера на страницу. Здесь, главное — забрать код. Скопируйте и сохраните его в блокнот (временно)

7. Жмете Makel — создается файл с расширением swf. Он уже сам по себе — плеер и воспроизводит встроенное в него аудио.

Следующие шаги будут состоять из трех пунктов:

  • Нужно закачать файл swf (можете назвать его своим именем, потому что по умолчания у него название AudioPlayer) на хостинг в ту папку, где у вас размещаются аудио.
  • Нужно вставить код (сохраненный в блокноте) на страницу, где вы хотите видеть плеер.
  • Нужно поменять в коде все пути размещения файла swf. Так как мы создавали файл на компьютере, у нас будут прописаны компьютерные пути и слеши. Нужно это все заменить.
Читайте также:  Улучшение поведенческих факторов блога

Qwertypay-Заработок в партнёрках!
Qwertypay – Агрегатор партнерских программ. Регистрируйся и зарабатывай!

specialist.qwertybiz.com

Вот и все. Делается все очень быстро. Такое аудио можно вставить на любую страницу, на страницу подписки (Как быстро создать страницу подписки?) как в сам блог, так и на отдельную в отдельной папке. Метод древний, но надежный. Кому надо — применяйте.

Имея Web Audio Plus, проблем с вставкой аудио больше не будет.

Хотите знать больше — подписывайтесь на обновления блога!

Автор: Игорь Козлов
Чистый звук в мире инфобизнеса

Включите свой мозг! - Хватит бродить по Интернету в поисках счастья! Вам ещё не надоело скачивать курсы, подписываться на рассылки и... топтаться на месте? Пора взяться за ум!

Не знаете, что делать дальше? - Вам нужна мотивация, за ней придет и творческое решение



Комментарии (29)

  1. Sofia Kurpin:

    Вот спасибо) Иногда подобную программу ищешь, ищешь...

    Ответить
  2. Василий Пандорин:

    У меня попроще плеер, но свою функцию выполняет)

    Ответить
    • Игорь Козлов:

      Плеер и у меня есть, но этот вариант простой и также хорош. На любой сайт, на любую страницу.

      Ответить
  3. lekar:

    Спасибо за статью.Скажите, а на платформу blogspot как вставлять аудио посты?

    Ответить
    • Игорь Козлов:

      На блогспот также можно вставить, но нужен хостинг для размещения аудио.

      Ответить
      • lekar:

        А как приобрести хостинг и поставить на него блог?

        Ответить
        • Игорь Козлов:

          Записывайтесь в бесплатную школу Стартап — там покажут и научат.

          В комментариях, что я могу сказать? Покупайте домен, хостинг, ставьте на него wordpress и будет у вас новый блог.

          Ответить
  4. Viktor:

    Большое спасибо, Игорь !

    Исключительно важно для моей работы и как раз во-время !

    Ответить
  5. Олег:

    Вставить плеер на сайт — просто, и программы для этого не обязательны.

    Да и самих плееров в сети огромное количество.

    Вариантов много, и самый простой из них — воспользоваться моими онлайн-конструкторами.

    Ответить
  6. Владимир:

    прога хорошая, но не во всех браузерах корректно работает.

    Ответить
    • Игорь Козлов:

      Пальцем в небо. В каких именно браузерах она некорректно работает. В Мазилле — работает. В Хроме работает. В эксплоуере — работает. Подозреваю, что и в Опере работает, не проверял. Каким браузером вы пользуетесь?

      Ответить
  7. Людмила Алешина:

    То что надо, Игорь!!! Класс! Только не убирайте, пожалуйста эту статью, освоюсь получше, обязательно вернусь и сделаю у себя! У меня ещё вопрос к Вам личный, почему у меня при загрузке робот.текс не вышло верхнего едит? Делала пошагово, помиллиметрово за видео Мих.Гаврилова. Писала в техподдержку, молчат, зато в поисковой SEO Tools / Count Links — пишет, что роботс.текст отсутствует, Господя? Как мне его прописать-то, конечно, он отсутствует, если я на половине пути застряла, что подскажете?

    Ответить
    • Игорь Козлов:

      Судя по всему, отсутствует. Загрузите его в корневую папку блога, через ftp.

      Ответить
  8. Victoria:

    Игорь, Вы, судя по всему, спец. Не могли бы Вы подробнее написать КАК ИМЕННО настраивать этот самый плагин Audio Player на Вордпресс? Очень он мне нужен...

    Я его установила, активировала, а вот как настроить не знаю. Куда, в какие папки именно нужно загружать файлы? Вы пишете, что с ним «всё просто» и настроить легко, но...Никак не могу понять. Извините, тут нас много таких — чайников. 🙂

    Ответить
    • Игорь Козлов:

      Виктория, суть такая — активируете плагин. В параметрах в админке находите пункт — Audio Player. Это настройки его. Здесь ставите галочку напротив Replace [audio] syntax, и в Default audio folder location нужно прописать название папки, которую нужно создать на хостинге и в которую будет складывать свои аудио.

      Создаете такую папку в корне сайта. Теперь, если в посте появится запись [audio:file.mp3] будет проигрываться ваш аудиофайл с названием file.mp3, который предварительно помещен в папку по умолчанию, та что была создана вами и прописана в Default audio folder location.

      Здесь blogopraktika.ru/?p=4242 я написал подробнее, как с Audio Player обращаться.

      Ответить
  9. Елена Олейникова:

    По ходу я вашей ученицей стану 🙂 Решила с сегодняшнего дня начать изучать ваш раздел «Аудиопрактика». Ну, как всегда, тут же идея появилась, которая мне очень понравилась и я считаю, что в ней есть рациональное зерно. Суть в том, чтобы из своих постов делать аудиофайлы и выкладывать тут же, под постом. Жизнь-то пошла сумасшедшая, хочется все успеть, но на все времени не хватает. А так скачал аудиофайл и слушай себе где-нибудь, стоя в километровой очереди 🙂

    Вот только сначала нужно научиться эти файлы создавать.

    Ответить
    • Игорь Козлов:

      Жизнь-то пошла сумасшедшая, хочется все успеть, но на все времени не хватает.

      Я это и раньше замечал, но однажды понял, что из кучи идей и планов, нужно выбрать наиболее эффективные. Все объять не получится. Например, долгое время носился с идеей заработка на продаже ссылок, потому что и опыт был и идея понятна. Но понял, что на Блогопрактике не буду этого делать. На другом сайте, который подписан под GGlinks — поднял цену. Лучше меньше, но дороже, а если нет — значит нет.

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

      Я это к тому, Елена, что понимаю вас, так как сам быстро загораюсь различными идеями, но здравый смысл подсказывает, что нужно найти из массы увлечений и предложений то, что уже работает, полезно другим и приносит доход, а затем развить это направление. По крайней мере, сначала что-то 1-2, потом все остальное.

      Поэтому Аудиопрактика не убежит, но нужно ли ещё нагружать себя изучением (именно сейчас), если например, у вас (по вашим словам) есть видео и инструменты для его создания. Я бы все отложил и заставил бы себя сделать самое простое видео, день потратил бы, но добил бы Камтазию или другой видеоредактор, чтобы пробиться в эту сферу . Выложил бы ролики на You tube (их можно скопом туда загружать) и это уже работало бы. Это как инвестиции.

      В этой схеме есть одно слабое звено, как делать видео («конь не валялся»). Значит нужно организовать себя на это. )) А там, ещё больше смысла появится в создании аудио. Так как одно с другим связано.

      Ответить
      • Елена Олейникова:

        Согласна с замечаниями, действительно, давно пора добить Камтазию, но я начну с аудио. Объясню почему. Все же я журналист, а не диктор, и хотя больших погрешностей в речи у меня нет, но я пробовала записывать себя на диктофон и тут сразу стали заметны кое-какие косячки — где-то дыхания не хватает, где-то запнулась, где-то пауза затянулась. Ну у вас-то с этим все в порядке, вы-то здесь профессионал, поэтому, наверно, забыли, с какими трудностями сталкиваются новички. Короче, в этом плане нужно поработать. Потому что и в видео речь очень много значит. Одними картинками сыт не будешь, если автор «кашу жует», меня это просто бесит. И я не хочу уподобляться всем этим гуру, которые считают, что и так сойдет, в итоге курс, который можно пройти за час, растягивают на сутки.

        Я обычно люблю, когда «одним махом семерых убивахом». Люблю «прессовать время». Например, стоя в очереди (а куда без них), можно делать невидимую гимнастику, можно слушать аудиофайлы. Вот именно с них и хочу начать, потому как готовые меня либо не всегда устраивают, либо я их уже не раз прослушала.

        Опять же — склероз на горизонте маячит, так что будем бороться и с ним тоже, поэтому как ни крути, без аудио никуда 🙂

        Ответить
  10. Лора:

    Спасибо огромное за информацию. Пока музыку на свой сайт вставляю через спецсайты, предварительно закачав ее туда или просто найдя нужную мелодию. Но так как в дальнейшем планирую и свою музыку выставлять, то думаю, что этот урок мне пригодится)) забрала себе в библиотеку!!!

    Ответить
    • Игорь Козлов:

      web audio для музыки не очень подходит. Он передает звук моно, тогда, как музыка хорошо слушается в стерео. А вот для речи — вполне сгодится. Или если не принципиально, моно будет или стерео.

      Ответить
      • Лора:

        Я записывала через микрофон музыку с синтезатора, потом обрабатывала ее в AdobeAudition, чистила отшума и получалось достаточно неплохо)) Хотя конечно, это непрофессиональный подход, зато есть возможность поделиться с друзьями теми сочинениями, которые я сочинила))

        Ответить
        • Игорь Козлов:

          Да, так можно. Вполне.

          Ответить
  11. Галина:

    Пошаговая инструкция

    1. Сначала нужно скачать саму программу Web Audio Plus.

    Игорь, скачать программу не получилось. Ссылка уже нерабочая? 🙁

    Ответить
    • Игорь Козлов:

      Уж поменял. Спасибо, Галина.

      Ответить
  12. Александр:

    Все=таки один вопрос остался без ответа: как поставить плеер на blogspot гугловский. У него нет сервера хостинга. Нужно что-то простое: кодом на страницу поставить и все.

    Ответить
    • Игорь Козлов:

      Очень просто. Загружаете файлы на ucoz, например, или на свой хостинг, и прописываются полные пути к файлу. Или нужно использовать podfm

      Ответить
  13. Наталья Трунина:

    Спасибо за программу. Скачала.выбрала цвет, значки. Вставила музыку на страницу сайта. Все получилось, звучит. Но почему нет значка плеера на странице в том виде в каком я его набрала? Во время звучания — черная страница с маленьким плеером.

    Ответить
    • Игорь Козлов:

      Возможно нужно уменьшить размеры вставленного объекта. Там все просто, Наталья, немножко поэкспериментируйте с настройками в процессе выбора плеера.

      Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

WordPress: 43.6MB | MySQL:77 | 0,742sec