Вставить музыку в видео онлайн. Как вставить аудио в HTML-документ? Как добавить аудио в html


  • muzicons.com — не закачивает файлы с компа, вставка аудио по прямым ссылкам на файл или через встроенный поисковик, выглядит так:
  • www.jetune.ru — в полной мере работает только для юзеров России. Чтоб выложить трек, надо на сайте найти (без регистрации) или закачать своего исполнителя (с регистрацией), кликнуть на конкретный трек и получить код плеера:
  • prostopleer.com — загружай или ищи на сайте музыку и получай код плеера:

    Некоторые файлообменники имеют аудиоплееры для mp3-файлов

    Типичные представители сетевой фауны:

  • divshare.com Регистрируемся. Жмем «Upload new file», загружаем трек. Клик на «dashboard» (вверху), появится файл. На него правой кнопкой мыши, выбираем «share», копируем «Embed Playlist» и вставляем:
  • box.net после закачки файла (по клику на shared ) выдаст ссылку на страницу для прослушивания и скачивания файла наподобие:
    www.box.net/shared/zf1uk007vy

    2. Учимся "ловить рыбу"

    Поняв принцип, можно забыть о подобных сервисах, которые часто закрываются, удаляют файлы, меняют условия и т.д.
    Код для вставки музыки в блог состоит из двух главных компонентов — флеш-плеер (файл *.swf в виде http://../player.swf ) и аудиофайл (в виде http://../song.mp3 ) — остальное HTML, то бишь буковки.
    Выглядит примерно так:




    Я залил сюда флеш-плеер и получил:
    http://сайт/wp-content/uploads/2009/06/webplayer.swf
    затем загрузил трек:
    http://сайт/wp-content/uploads/2009/06/08-caravan.mp3
    Вставил эти ссылки в код выше:

    Полный код безобразия:

    Если в этот код вставите свой mp3 файл вида http://…./song.mp3 ("прямая ссылка"), он будет играть вашу музыку:).

  • width и height определят размеры плеера.
    Если назначить height=16 , получим:

    Чтоб исключить сбой кодировок, избегайте кириллицы и пробелов в названиях треков.
    Переименовывайте файлы перед закачкой их на хостинг.
    Примеры:
    моя песня.mp3 (нельзя в плеер, будет глюк)
    moya_pesnya.mp3 (можно юзать)

  • Можно вставлять плейлисты:

    — навигация по трекам

  • Делаем такой плеер с плейлистом:
    1. Загружаем на хостинг аудиофайлы и составляем такой список треков:



    2. Копируем образец кода плейлиста ОТСЮДА
    (всё, что под чертой)
    3. Открываем на компе программу Блокнот, вставляем туда этот код.
    4. Вместо примера списка треков вставляем свой заготовленный список треков.
    5. Жмем «Файл-Сохранить как». Называем файл playlist.xml и сохраняем.
    (назвать можно как угодно, главное — на латинице и .xml )
    6. Файл playlist.xml грузим на хостинг, ссылку на него ставим в код плеера там, где в плеере с одним треком стоит ссылка на mp3-файл: http://site/song.mp3
    7. Вставляем полученный код плеера в блог.
  • Другой плеер, «складной»:

    Код копируем, ставим ссылку на свой mp3 вместо ВАШ_ФАЙЛ и слушаем:

  • Компакт-плеер:

    Cтавим ссылку на свой mp3 вместо ВАШ_ФАЙЛ (в двух местах!):

  • Теги, атрибуты и значения

    • - определяет фоновый HTML звук, музыку на сайте . Располагается в секторе .
    • - определяет url звукового файла в формате Wav или Mp3.
    • loop="" - определяет количество проигрываний.
    • volume="-1000" - регулирует громкость звука. В данном случае обозначенная величина будет вычтена из текущего уровня громкости, установленного на компьютере пользователя.
    • balance="0" - регулирует баланс звучания.

    Внимание! Описанный выше метод внедрения фонового звука в HTML -страницу приемлем только для браузеров Internet Explorer и Opera ранних выпусков. Для современных браузеров он не подходит ⇒ музыка и звук на странице сайта не воспроизводятся! Поэтому смотрим ниже , где подробно рассмотрен кроссбраузерный способ вставки звука и музыки на сайт для всех браузеров (Opera, Firefox, Internet Explorer, Chrome).

    Звук в HTML или музыка на сайте для всех браузеров

    Фоновый HTML звук для Opera, Firefox, Internet Explorer, Chrome:

    Размещается код в секторе .

    Aтрибуты и значения

    • autostart="" - определят будет ли музыка проигрываться автоматически при открытии интернет-станицы или нет. Возможны значения: true - да или false - нет.
    • loop="" - определяет будут ли повторяться проигрывания. Возможны значения: true - да или false - нет.
    • hidden="" - определяет будет ли скрыта панель управления плейера или нет. Возможны значения: true - да или false - нет. Если не будет, то указываются размеры панели: width="" height="" .

    С овет напрашивается сам собой! Используйте фоновый HTML звук или музыку на своем сайте только в случае, когда это действительно оправдано!

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

    Как вставить фоновую музыку на сайт

    Вставка фоновой музыки на сайт самый опасный вариант в плане потери посетителей. Потому что фоновою музыку мало того, что нельзя никак выключить, так к тому же и громкость ее никак не регулируется (все зависит от текущей громкости на компьютере). Так что надо сто раз подумать, прежде чем вставлять фоновую музыку.

    Есть два способа для вставки музыки в html

    Вариант 1. Через html тег

    Синтаксис для вставки фоновой музыки

    У тега есть несколько атрибутов:

    • loop="значение" - количество повторений музыки (если -1, то повторяется бесконечно)
    • balance="значение" - стереобаланс (от -10000 до 10000)
    • volume="значение" - громкость (0 максимум, -10000 минимум)

    Музыка будет играть автоматически при загрузке страницы.

    Например

    Вариант 2. Через тег

    Синтаксис для вставки объекта с музыкой

    У тега возможно использование следующих атрибутов:

    • width="значение" - ширина (в пикселях или процентах)
    • height="значение" - высота (в пикселях или процентах)
    • align="значение" - выравнивание (left - слева, right - справа, center - по центру)
    • hidden="значение" - видимость панели (true - скрыть, false - показывать), по умолчанию панель видна
    • autostart="значение" - проигрывать музыку при загрузке (true - да, false - нет)
    • loop="значение" - значение true - проигрывать по кругу, false - один раз

    Например

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

    В html5 можно использовать тег

    Смысл использования тега

    Синтаксис тег

    Следующие атрибуты можно использовать:

    • autoplay="значение" - включить музыку сразу при загрузке страницы
    • controls="значение" - отображать панель управления плеера в браузере
    • loop="значение" - отвечает за цикличность
    • preload="значение" - загружать музыку сразу с загрузкой страницы

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

    Думаю, пришло время получить ответ на вопрос, как вставить флэш-ролики, видео и аудио файлы в HTML документ.
    Покажу несколько способов, как вставить видео ролик или аудио файл .

    Способ 1.

    Видео и аудио файл можно вставить в HTML-документ с помощью тега .

    Закрывающий тег не требуется.

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

    Вид плеера зависит от подключенного плагина и атрибутов тега .

    Например, вот Google Chrome:

    Или в Internet Explorer:

    Атрибуты EMBED

    height - высота плеера (в пикселях). Пример:

    Swf" height="100">

    width - ширина плеера (в пикселях). Пример:

    Swf" width="200">

    src - адрес флэш-ролика, видео или аудио файла. Пример:

    type - указывает MIME-тип (спецификация форматирования сообщений и кодирования информации для передачи по интернету) содержимого элемента.

    pluginspage - адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру.

    autostart - если параметр стоит «0», то это значит, что после загрузки веб-страницы, плеер будет остановлен. Если указать параметр «1 », тогда после загрузки веб-страницы, плеер будет автоматически воспроизведен (работает в браузере IE). Пример:

    title - вывод всплывающей подсказки при наведении курсора мышки на аудио или видео плеер. (Работает в браузере IE).

    Пример:

    ТЕГ embed

    Результат в Google Chrome:

    А можно вот так:

    ТЕГ embed

    Результат в Google Chrome:

    Способ 2.

    Изображения, аудио, видео, Java приложения, ActiveX, PDF и Flash можно вставить в HTML-документ с помощью тега .

    Закрывающий тег обязателен.

    Атрибуты OBJECT

    data указывает путь к файлу объекта;
    type тип обекта (не является обязательным). Например:

    type="application/x-shockwave-flash" или type="image/png" и т.д.;

    width – ширина;
    height высота

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

    Пример:

    Тег OBJECT Ваш браузер не поддерживает тег object

    Результат данного примера в окне браузера, если он не поддерживает тег OBJECT :

    Способ 3.

    Вставить аудио на веб-страницу можно и тегом

    Атрибуты тега AUDIO

    autoplay - аудио воспроизводится автоматически сразу после загрузки веб-страницы;

    controls - панель управления к аудио плееру;

    height - высота аудио плеера;

    loop - повтор воспроизведение аудио сначала после его завершения;

    src - путь к аудио файлу

    Пример:

    ТЕГ AUDIO

    Результат:

    Вставить видеоролик на веб-страницу можно и тегом

    Атрибуты тега VIDEO

    autoplay - видео воспроизводится автоматически сразу после загрузки веб-страницы;
    controls - панель управления к видео плееру;
    height - высота видео плеера;
    width - ширина видео плеера;
    loop - повтор воспроизведение видео сначала после его завершения;
    src - путь к видео файлу;
    poster - адрес картинки. Картинка будет отображаться пользователю, пока видео не доступно или не воспроизводится.

    Описание

    Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег . Внутри контейнера

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

    Табл. 1. Кодеки и браузеры
    Кодек Internet Explorer Chrome Opera Safari Firefox
    ogg/vorbis
    wav
    mp3
    AAC

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

    Синтаксис

    Атрибуты

    Звук начинает играть сразу после загрузки страницы. Добавляет панель управления к аудиофайлу. Повторяет воспроизведение звука с начала после его завершения. Используется для загрузки файла вместе с загрузкой веб-страницы. Указывает путь к воспроизводимому файлу.

    Закрывающий тег

    Обязателен.

    HTML5 IE 8 IE 9+ Cr Op Sa Fx

    audio

    Александр Клименков - Четырнадцать

    Результат примера в браузере Opera показан на рис. 1.

    Рис. 1. Воспроизведение аудиофайла

    Браузеры

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