Как вставить аудио на сайт: Как вставить музыку в HTML страницу

Как вставить аудио на сайт

Универсальный способ вставки audio в web страницу на основе HTML5 и флеш плеера. Работает во всех браузерах (и мобильных), легко настраивается, имеет минимум кода. Может проигрывать несколько файлов, как play лист. Не тормозит загрузку страницы, соответствует стандартам, открытый код. Идеальный вариант для вставки mp3 и других аудио в статью. Есть реализация для WordPress в виде плагина.

Вот как это будет выглядеть:

Пример вставки audio

Автор: Andrey Boldyrev

В этой статье я описываю реализацию аудио для тех, кто имеет возможность напрямую вставлять в свои статьи HTML и js код.

Если перед вами стоит вопрос с какого хостинга загружать мультимедийные файлы аудио и видео, то посмотрите статью Yandex Disk REST API jQuery Plugin, в которой описан вариант вставки медиа файлов на WEB страницу с Яндекс Диска.

Замечание автора: Описанный в статье метод вставки видео прекрасно работает, однако он основан на использовании flash плеера, как проигрывателя аудио по умолчанию, что не является следованием актуальным тенденциям в вебе, где сейчас наблюдается сдвиг предпочтений в пользу использования js плееров. Но, на мой взгляд, решение должно быть как можно проще и без больших библиотек и множества кода, а js плееры, пока еще, оставляют желать лучшего в этом отношении.

Как то мне нужно было для себя решить задачу — как добавить в пост свою голосовую заметку. Нужен был очень простой способ с небольшим количеством кода, который я мог бы сохранять вместе с основным текстом статьи. Так же я планировал в дальнейшем оформить это в виде плагина к CKEditor, который использую как редактор текста в своих CMS. Просмотрев разные источники и протестировав их я сформировал оптимальное, на мой взгляд, решение, которое и описано здесь.

Подход использует две технологии для проигрывания аудио файла и имеет три уровня «отказоустойчивости»:

1. Первая, будет основной — это флеш плеер.
   Мною выбран был свободный WordPress Audio Player, который будет воспроизводить звук в тех браузерах, которые поддерживают flash плеер. Причина выбора мною в этом подходе flash, как основного плеера для аудио, в том, что он будет отображаться одинаково в разных браузерах в отличие от HTML5 плеера, вид которого, пока, оставляет желать лучшего. А подключать для воспроизведения аудио JS библиотеку управления HTML5 плеером мне кажется не совсем целесообразным, так как, такие JS плееры все же громоздки и не так идеальны, как хотелось бы. Для Воспроизведения видео файлов, безусловно, нужно использовать, как первичный, JS HTML5 плеер. Вообще, в идеале, хотелось бы обходиться для воспроизведения аудио и видео без использования дополнительных плееров (flash или JS), а использовать только возможности браузера.;
2. Вторая — HTML5 тег <audio> — будет резервной для случаев, когда flash не поддерживается. В основном, это MAC и iГаджеты, но у них HTML5 плеер уже достаточно хорошо реализован в браузерах.
3. Третий, резервный вариант, будет ссылка на скачку, когда первые две не сработают. Это вариант на крайний случай, так как сейчас уже все браузеры поддерживают HTML5 тег audio.

Нам понадобиться скачать zip с файлами flash плеера и js к нему (ссылка на официальный сайт ).

Нам нужны, толькло два файла из всего скачанного архива:

• player.swf           —это сам flash player, который будет проигрывать mp3 файлы.
• audio-player.js   —это js, который добавит функциональности по управлению плеером и устраняет неправильности его работы в разных браузерах.

Файлы из этого архива нужно разместить на сайте. Кстати js можете сжать.
В этой статье договоримся, что примеры будут использовать директорию

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

РЕАЛИЗАЦИЯ РЕШЕНИЯ В ДВУХ ВАРИАНТАХ:

ПЕРВЫЙ — Формируем весь HTML код САМИ и вставляем в статью. Напишем шаблон HTML кода в котором нужно будет менять только пути для конкретного случая.

ВТОРОЙ — Формируем HTML ЧЕРЕЗ js. В пост (или куда вам нужно) вставляем маленький блок кода js.

Еще по теме:

Реализация video и audio в HTML5, шаблоны, schema.org микроразметка

5 способов добавить аудио в ваш блог на WordPress

Автор: Елизавета Гуменюк

Просто люблю писать, переводить и давать людям возможность читать интересный контент. И пусть я не всегда идеальна — есть к чему стремиться!!!

Использование аудио на вашем сайте может быть очень эффективным способом того, как вы можете добраться до целевых пользователей. Много разработчиков веб-сайтов отказываются от использования аудио, только если они не разрабатывают веб-сайт для радиорекламы. Один из способов вовлечения пользователей в полной мере состоит в том, чтобы дать им немного многозадачности, что-то, что считается частью повседневной жизни. Аудио отличается от текстового контента, и многим пользователям будет гораздо легче соединиться с вами по средствам аудио, в тот момент, когда они просматривают контент на вашем сайте. Опять же, пользователи, у которых нет времени, чтобы полностью изучить весь контент или посмотреть вебинар могут слушать ваши аудио, даже если они заняты чем-то еще. Вот почему вы должны узнать, как можно поместить аудио в свой блог на WordPress.

По умолчанию WordPress способен обрабатывать любые аудиофайлы. Это весьма простая вещь, которая не потребует особых усилий. Так же просто, как вы можете добавлять изображения в свои посты, вы также можете вставить и аудио. Это стало еще проще с HTML, до которого ранее не было стандартного способа воспроизведения аудиофайлов на веб-сайте. Несмотря на то, что был Flash и был весьма популярен, но он был не очень приятным. Сегодня WordPress может использовать HTML5, чтобы вставлять аудио на веб-сайт. Звук будет воспроизводиться на любом браузере и устройстве, в том числе на мобильных телефонах.

2. Использование WordPress Audio Player

Это самый простой способ добавить аудио на ваш сайт WordPress. Использовать аудиоплеер WordPress легко и поэтому данный метод может быть принят как единственный выход, если только у вас нет особых потребностей. С помощью него вы сможете добавить файлы mp3, m4a, ogg и wav в медиатеку WordPress, откуда они могут быть вставлены в любую запись по вашему выбору. Вы также можете добавить дополнительную надпись к своей загрузке. Что вам необходимо сделать, так это нажать кнопку мультимедиа на своем веб-сайте WordPress, перетащить аудиофайл в библиотеку, а затем нажать «Загрузить файлы». Затем нажмите «Выбрать файлы», чтобы добавить аудиоконтент в медиа-библиотеку. На вашем экране используйте правильный размер, чтобы заполнить соответствующие метаданные, относящиеся к загруженному аудио, включая такую информацию, как название аудио, артист, данные альбома, любые заголовки и описание, которое вы хотите, чтобы ваши пользователи увидели.

3. Создание звукового плейлиста WordPress

Это может быть отличным способом добавления звука в блог на Word Press, если у вас есть более одного аудиофайла, которым вы хотите поделиться. Хорошая вещь заключается в том, что WordPress также поддерживает плейлисты. В этом случае вы должны нажать кнопку «Создать аудиоплеер» в своей медиабиблиотеке, а затем выбрать все аудиофайлы, которые вы хотели бы включить в этот плейлист. Как только это будет сделано, вы сможете добавить любые метаданные, относящиеся к данному списку, чтобы пользователи могли их видеть. Наконец, нажмите «Создать новый плейлист». Затем вы можете выбрать необходимые параметры, которые будут использоваться для отображения ваших аудиофайлов, включая список дорожек, имя исполнителя и т.

4. Вставка звука с проигрывателя SoundCloud

SoundCloud — это сервис, который в наши дни используется людьми, которые хотят делиться музыкой в Интернете. Он работает так же, как и YouTube, только в основном для аудио. SoundCloud можно очень легко использовать для размещения ваших аудиофайлов, которые вы хотите встроить на свой сайт. Он также может использоваться для обмена файлами, которые у вас уже есть, с пользователями вашего веб-сайта. Услуга была разработана таким образом, что ее можно легко встраивать в любой контент на любом веб-сайте. Чтобы начать работу, убедитесь, что все аудиофайлы, которыми вы хотите поделиться, имеют под ними кнопку общего доступа, так как это единственный способ, которым их можно вставить. Если у всех из них имеется кнопка расшаривания, нажмите «Вставить» и выберите между большим квадратом или меньшими прямоугольными параметрами, которые появляются.

5. Использование аудио-плагина WordPress

Это лучший вариант для тех, кто хочет сделать что-то большее, поскольку плагины предлагают расширенную функциональность, а также большую конфигурацию по сравнению с аудиоплеером WordPress. Хорошо, что существует так много вариантов: поэтому легко найти плагин, который будет легко отвечать вашим потребностям в зависимости от того, какую функциональность вы ищете. Некоторые из доступных опций включают компактный проигрыватель WP audio.

Это более компактный вариант, который появляется как значок воспроизведения. С его помощью вы сможете добавлять файлы MP3 и OGG в свой блог на WordPress. Другим отличным вариантом является MP3-jplayer. Это более гибкий вариант, который можно использовать для расширения коротких кодов WordPress с новыми возможностями и функциями. Плагин имеет отличный стиль, множество вариантов компоновки и цвета. Вы также можете использовать интерфейс перетаскивания, а еще возможность воспроизведения звука непосредственно из медиа-библиотеки, URL-адресов и загруженных файлов.

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

Источник

Как встроить бесплатный MP3-плеер на свой сайт: 3 способа

Если вы хотите, чтобы посетители вашего веб-сайта наслаждались файлом MP3, один из самых простых способов сделать это — встроить его на страницу. Благодаря встроенному MP3-плееру посетителям не нужно напрямую загружать звук или использовать дополнительное программное обеспечение, поскольку он воспроизводится в режиме реального времени.

Мы подробно расскажем о различных методах, которые вы можете использовать для встраивания MP3 на свой веб-сайт, в том числе с помощью HTML5 и Google Диска.

1. Вставьте MP3 на свой веб-сайт с помощью HTML5

Если вам удобно редактировать код своего веб-сайта, одним из самых простых способов встраивания файла MP3 является использование HTML5.

Тег HTML5 может показаться простым на первый взгляд, но он эффективен, поскольку совместим со всеми основными настольными и мобильными браузерами.

Чтобы встроить MP3 с HTML5, используйте этот код:

 Генерация кода не удалась!! 

Просто замените MP3 URL ЗДЕСЬ с вашим загруженным аудиофайлом. Это не может быть файл, хранящийся на вашем компьютере; он должен быть доступен онлайн.

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

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

Вы можете применять такие атрибуты, как autoplay и loop , например:

 Генерация кода не удалась!! 

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

Базовая настройка может быть применена к блоку аудиоплеера с помощью CSS, например, граница и отступ . Однако вам потребуется использовать JavaScript для правильного оформления самого проигрывателя, чтобы он был единообразен в разных браузерах.

Дополнительную информацию об атрибутах и ​​настройке аудиоплеера HTML5 можно найти в веб-документах MDN.

Связано: классные HTML-эффекты, которые каждый может добавить на свой веб-сайт

2. Вставьте MP3 на свой веб-сайт с помощью Google Диска

Google Drive — отличное бесплатное облачное хранилище. Вы можете использовать его для загрузки файла MP3 и создания аудиоплеера.

При загрузке MP3 на Google Диск:

1. Щелкните правой кнопкой мыши файл и нажмите Получить ссылку .
2. Измените ограничение доступа на Всем, у кого есть ссылка .
3. Наконец, нажмите Скопировать ссылку .

Это даст вам URL, подобный этому:

 Генерация кода не удалась!! 

Замените view?usp=sharing на preview , например:

 Генерация кода не удалась!! 

Затем используйте тег  Пример встроенного звука SoundCloud.

Вот как вы можете легко встроить аудио в WordPress.

Использование плагина аудиоплеера

Если вам нужны дополнительные функции, вам нужно использовать плагин аудиоплеера. На арене WordPress доступно несколько плагинов для аудиоплееров.

Вот некоторые из лучших плагинов для аудиоплееров —

Compact WP Audio Player : это аудиоплагин WordPress на основе HTML5, который позволяет встраивать файлы .mp3 или .ogg. Он поддерживает все основные браузеры и устройства.

AudioIgniter : это плагин для музыкального проигрывателя, который позволяет вам демонстрировать свою музыку, подкасты и радиопотоки. Это бесплатный плагин. Pro-версия стоит 79 долларов в год.

HTML5 Audio Player : простой и удобный плагин, который поддерживает все устройства.