Меню Рубрики

Установка аудиоплеера на страницу

Как поставить аудиоплеер на свой сайт

Механизм добавления на html страницу внешних объектов, таких как звук и видео, завязан на использовании установкой плагинов для Вашего браузера. Причем, при использовании тега EMBED, браузер открывает внешний объект с помощью того плагина, который у него установлен в данный момент.

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

Давайте посмотрим, ка всё это работает. Как только, Ваш браузер встречает в html коде тег EMBED, то он, подгружает подходящий установленный плагин. Если подходящего плагина не окажется, тогда браузер выдаст сообщение о том, что плагин необходимо установить и предлагает перейти на страницу установки.

Информация о параметрах открываемого объекта и необходимых плагинах, для его открытия, передаётся браузеру через следующие параметры тега EMBED:

  • align — выравнивание объекта по отношению к окружающему контенту
  • border — устанавливает размер рамки вокруг объекта
  • classid — указывает на класс объекта, используя адрес его нахождения
  • codebase — базовый адрес, по которому будут определяться относительные адреса, указанные в >codetype — тип данных, которые использует объект, согласно параметру >data — путь к данными, которые объект будет обрабатывать
  • declare — объявление объекта
  • height — высота объекта
  • hspace — боковые отступы объекта от окружающего контента
  • pluginpage — адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру
  • standby — выводит сообщение, пока объект не загрузится
  • type — тип данных, которые хранятся по адресу, указанному в data
  • vspace — отступы сверху и снизу от окружающего контента
  • width — ширина объекта
  • class — класс тегов, используемых в CSS
  • dir — направление текста внутри элемента
  • id — имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей
  • lang — язык, на котором написан текст внутри htmlэлемента
  • style — используется для применения встроенных стилей CSS
  • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
  • title — выводит всплывающую подсказку при наведении курсора мыши на html-элемент.

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

Ну что же, теперь, давайте добавим на нашу страницу код, с использованием тега EMBED, чтобы на странице появилась возможность проигрывать наш звуковой файл:

Давайте подробно разберём, за что отвечает в данном коде каждый параметр.

Итак, тег EMBED , указывает, на то, что на страницу будет добавлен внешний объект. Путь к файлу объекта, указан в параметре: src=»music.mp3″

Сразу отмечу, что когда воспроизводимый файл будет размещён на сервере, то лучше будет, если Вы укажите к нему полный, абсолютный путь, например, http://www.site.ru/music.mp3

Далее, идет размер объекта, в данном случае, плеера. Параметрами w > указаны ширина и высота плеера.

Параметр autostart=»0″ указывает на то, что по загрузке страницы, плеер будет остановлен.

Тип объекта указан в параметре – type .

В случае, если у браузера не будет установлен плагин для отображения этого объекта, то параметром (pluginspage) браузеру указано, где этот плагин можно взять: pluginspage=»http://www.macromedia.com/go/getflashplayer .

Как видите, используя тег EMBED, мы получаем достаточно простой html код, в результате работы которого, браузер отображает плеер на странице сайта и у посетителя сайта появляется возможность воспроизвести звуковой файл.

Теперь, посетитель сайта, кликая по элементам управления плеера, может прослушать аудио запись и управлять её воспроизведением.

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

Как видите, при использовании тега EMBED звук на страницу сайта добавляется довольно просто. Плеер для страниц сайта, добавляется несколькими всего строчками html кода.

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

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

Не забудьте правильно указать полный путь к звуковому файлу.

источник

Как вставить аудио-плеер на сайт

Как добавить аудио-плеер на сайт — этот вопрос прежде всего волнует тех, кто увлекается созданием музыкальных открыток. Самый простой способ добавить аудио-плеер на сайт — добавить его в виде html-кода.

Читайте также:  Установки пожаротушения тонкораспыленной водой применяются для

В своем бесплатном курсе по созданию открыток «Музыкальные открытки своими руками» я очень подробно описала, как добавить на свою открытку аудио-плеер с помощью готового кода, который можно сгененировать на сайте http://flv-mp3.com/ru/mp3/.

Для того, чтобы получить код плеера необходимо предварительно загрузить музыкальный файл к себе на хостинг, например, в созданную для этого папку audio. Название файла должно состоять из латинских букв или цифр без пробелов — это важно, иначе ваша музыка не будет проигрываться. Пробелы в названии можно заменить нижним подчеркиванием, проследите, чтобы не было никаких скобок. Теперь вам необходимо прописать адрес к загруженному файлу. Он будет выглядеть примерно так http://ваш_домен.ru/audio/название_музыкального_файла.mp3.

Теперь переходим на сайт, указанный выше и собираем наш плеер:

Теперь надо позаботиться о внешнем виде этого файла:

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

Как видно, цветовой выбор не очень богат, поэтому лучше воспользоваться готовыми Скинами:

Пройдитесь по строчкам и выберете для себя наиболее подходящий, я для себя выбрала в данном случае золотистый. После этого вы нажимаете на «Собрать и получить html-код»:

Если у вас правильно прописан путь к музыкальному файлу, то музыка начнется проигрывать. Если вас что-то не устраивает в уже готовом плеере (вы хотите выбрать другой скин, сделать его немного поменьше, поменять ссылку на другой музыкальный файл, то достаточно нажать на «Редактировать». Если же вас все устраивает, то вы копируете получившийся html-код:

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

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

Вы можете собирать аудио-плеер самостоятельно на том же сайте:

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

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

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

Но я могу предложить вашему вниманию небольшой код плеера, который вы можете добавлять к себе в открытку:

источник

Лучшие 10 аудио плееров на html5 и jQuery

Согласно Buzz Angle Music, в первом квартале 2017 года в США было потреблено всего 83 миллиарда аудиопотоков. Это на 61,2% больше, чем в предыдущем квартале. Между тем продажи музыки упали на 23,8%.

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

1. MediaElement.js

В настоящее время один из лучших медиа-плееров с открытым исходным кодом для сайтов. MediaElement.js поддерживает как видео, так и аудио и способен воспроизводить медиафайлы из своих и сторонних источников, таких как SoundCloud, YouTube, DailyMotion, Vimeo и Twitch. Он может быть настроен с использованием ванильного JavaScript, jQuery, Node, Meteor, Require.js и React

Читайте также:  Установка закладных деталей весом до 4кг

Причина, по которой я оценил этот медиаплеер, — это то, что он все еще активно развивается. Это означает, что проблемы будут устранены быстрее, и, скорее всего, они будут обновлены с последними стандартами HTML5 и поддержкой браузера.

2. SoundManager 2

SoundManager 2 создан для упрощения аудио на настольные и мобильные платформы. Он имеет мощный API, который использует HTML5 аудио, где поддерживается, и, при необходимости, возвращается обратно в Flash. Он не имеет внешних зависимостей и может использоваться с другими фреймворками JavaScript, такими как jQuery. Документация является высшей отметкой, что позволяет разработчикам настраивать ее для своих нужд. Он поддерживает списки воспроизведения и множество скинов доступны из сборки. Некоторые из этих веб-сайтов используют Last.fm и BeatsMusic.

Развитие этого аудиоплеера замедлилось, но сообщество с открытым исходным кодом отлично справляется с решением проблем, о которых сообщают пользователи. Sound Manager 2 действительно хорошо разработан и по-прежнему совместим с последними стандартами браузера. В настоящее время он поддерживает все основные браузеры, включая IE6, Safari и Android.

3. React-jPlayer

Если вы ищете версию jPlayer, которая не имеет зависимости от jQuery, тогда вам повезло (то есть, если вы разработчик React). В настоящее время он поддерживает как аудио, так и видео. Поддерживаются современные браузеры от IE9 и всех современных мобильных платформ. Это означает, что старые браузеры, такие как IE6 и IE7, не поддерживаются (неважно). Он не использует Flash как резерв, так как iOS и Chrome официально отказались от поддержки.

Проект, похоже, был запущен несколько месяцев назад, и он уже получил 520 загрузок за последний месяц. Из представленной демонстрации все функции, как представляется, работают правильно как на настольных, так и на мобильных устройствах. В настоящее время плейлисты не поддерживаются. Это будет реализовано в следующем пакете с именем react-jPlaylist.

Будучи проектом React, это, очевидно, ограничивает использование в других интерфейсных JavaScript-фреймах, таких как Vue.js. Однако у него есть огромное количество настраиваемых функций, что делает его идеальным для создания нового современного веб-сайта для потоковой передачи музыки.

4. Аудиоплеер HTML5 с плейлистом

Этот чрезвычайно популярный аудиоплеер HTML5 приносит замечательное количество возможностей пользователям. Он поддерживает широкий спектр функций и выглядит так, как показано на странице предварительного просмотра, включая полноэкранное слайд-шоу.

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

5. Полноэкранный Аудиоплеер

Это плагин WordPress, который преобразует ваш стандартный сайт WordPress в музыкальный сайт. Он полностью реагирует и имеет возможность добавлять плейлисты и треки на страницу. Он также поддерживает всплывающие окна для воспроизведения без прерывания воспроизведения. Вы можете добавить FullWidth Audio Player внизу на любую страницу WordPress или опубликовать с помощью коротких кодов. SoundCloud также поддерживается.

6. Zoomsounds

Это отзывчивый, готовый сетчатки, аудиоплеер HTML5, который поставляется с 3 скинами из сборки. Поддерживаются все мобильные и современные браузеры, включая IE7 +. Он поддерживает воспроизведение аудио с YouTube, а также SoundCloud. Разработчики могут настраивать пользовательский интерфейс игрока через SASS или CSS. Разработчик компонента также предоставил версию WordPress.

7. Royal Audio Player

Это аудио и видеопроигрыватель для тех, кто хотел бы развлекать своих онлайн-посетителей стильным аудиоплеером. Он реагирует и поддерживает все современные браузеры и мобильные платформы. Он имеет обширный API, который поддерживает YouTube, SoundCloud, Podcasts, Official.fm, SHOUTcast и Icecast. Он также поддерживает внешние источники, такие как Google Диск и Amazon S3.

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

8. jPlayer 2

JPlayer 2 — это аудио и видео плагин jQuery с поддержкой HTML5 и Adobe Flash в качестве резервного. Он поддерживает все основные браузеры, включая IE6 +, Safari, Chrome, Mozilla, IOS, Android и Blackberry. Его документация обширна, что позволяет разработчикам настраивать ее на свои нужды. В нем есть поддержка плейлистов, и несколько тем предоставляются из коробки. Он используется такими организациями, как Pandora, BBC и Aljazeera.

Читайте также:  Установка подвеса на квадрокоптер

К сожалению, этот большой плагин пренебрегал сообществом open-source. Проблемы накопились и быстро отстают от современных стандартов браузера. Однако есть хорошие новости. Планы для jPlayer 3 уже ведутся. Цель состоит в том, чтобы принести ряд улучшений, включая удаление зависимости jQuery, что позволяет использовать ее в других средах.

9. Gear HTML5 Audio Player

Gear — это аудио-плеер с поддержкой HTML без звука, основанный на jQuery, с потрясающим пользовательским интерфейсом. Он имеет гладкую анимацию SVG, уникальный эквалайзер холста и поддержку SoundCloud. Он имеет мобильный отзывчивый дизайн, плейлист JSON, круговой трекбэк и пристыкованный мини-плеер.

Кстати, SoundManager 2 зачисляется как один из проектов, используемых для создания этого прекрасного аудиоплеера.

10. tPlayer — Аудиоплеер для WordPress

TPlayer — это плеер на основе jQuery для WordPress. Он поддерживает воспроизведение аудиофайлов MP3, а также потоковую передачу из SoundCloud, SHOUTcast и Icecast. Он имеет большой дизайн UX на планшетных и смартфонных устройствах и включает в себя анимацию SVG.

Вывод

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

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

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

Этот список не может быть всеобъемлющим, но я надеюсь, что, по крайней мере, он дает вам представление о том, что доступно там. У вас есть плагин, чтобы рекомендовать? Я пропустил ваш любимый аудиоплеер? Дай мне знать в комментариях!

источник

Адаптивный аудио плеер на ваш сайт

С выходом HTML5, набирает оборот популярность аудио плееров. Сегодня мы рассмотрим плагин AudioPlayer.js, благодаря которому вы сможете быстро и легко добавить проигрыватель музыки на ваш сайт.

Главные характеристики данного плагина:

  • Адаптивность, на основе CSS;
  • Дружелюбен для всех типов мониторов, включая сенсорные;
  • Весит всего 4 KB;

Использование

В первую очередь, вам необходимо указать путь к файлу через атрибут src. Пример:

Данный код только загрузит файл, без его запуска. Для запуска нужно нажать на кнопку Play. Другие возможные варианты атрибута preload (none, metadata).

Для автоматического проигрывания файла после загрузки воспользуйтесь атрибутом autoplay:

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

Ну а как же запустить плагин? Очень просто. Подключаем jQuery и плагин в HTML:

Также вы можете воспользоваться несколькими дополнительными параметрами. К примеру, classPrefix, который задаст префикс атрибутам класс. Другие возможные опции:

Если же браузер не поддерживает элемент audio, то он будет заменён на:

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.webresourcesdepot.com/responsive-html5-audio-player-with-touch-support/
Перевел: Станислав Протасевич
Урок создан: 28 Мая 2013
Просмотров: 72647
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

источник

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