Содержание
Как добавить аудио-плеер на сайт – этот вопрос прежде всего волнует тех, кто увлекается созданием музыкальных открыток. Самый простой способ добавить аудио-плеер на сайт – добавить его в виде html-кода.
В своем бесплатном курсе по созданию открыток “Музыкальные открытки своими руками” я очень подробно описала, как добавить на свою открытку аудио-плеер с помощью готового кода, который можно сгененировать на сайте http://flv-mp3.com/ru/mp3/.
Для того, чтобы получить код плеера необходимо предварительно загрузить музыкальный файл к себе на хостинг, например, в созданную для этого папку audio.
Название файла должно состоять из латинских букв или цифр без пробелов – это важно, иначе ваша музыка не будет проигрываться. Пробелы в названии можно заменить нижним подчеркиванием, проследите, чтобы не было никаких скобок.
Теперь вам необходимо прописать адрес к загруженному файлу. Он будет выглядеть примерно так http://ваш_домен.ru/audio/название_музыкального_файла.mp3.
- Теперь переходим на сайт, указанный выше и собираем наш плеер:
-
- Теперь надо позаботиться о внешнем виде этого файла:
-
- В этих настройках мы можем изменить размер плеера, цвет, и даже выставить такую функцию, как автозапуск, чтобы музыка начинала звучать сразу, как только посетитель открывает сайт, на котором расположен плеер.
- Как видно, цветовой выбор не очень богат, поэтому лучше воспользоваться готовыми Скинами:
-
- Пройдитесь по строчкам и выберете для себя наиболее подходящий, я для себя выбрала в данном случае золотистый. После этого вы нажимаете на “Собрать и получить html-код”:
-
Если у вас правильно прописан путь к музыкальному файлу, то музыка начнется проигрывать. Если вас что-то не устраивает в уже готовом плеере (вы хотите выбрать другой скин, сделать его немного поменьше, поменять ссылку на другой музыкальный файл, то достаточно нажать на “Редактировать”. Если же вас все устраивает, то вы копируете получившийся html-код:
О том, как добавить аудио или видео на сайт меня часто спрашивают, но в одном из комментариях мне написали, что этот сайт заражен вирусами. Я решила проверить, и вроде бы мне показалось, что сайт работает нормально, генерирует код, который легко можно вставить в открытку. Но есть одно НО…
Если хорошо присмотреться к уже готовому плееру, то там есть один маленький, едва заметный значок, и если к нему подвести (даже не кликнуть) мышку, то тебя автоматически переадресовывает на сторонний сайт.
Сначала я подумала, что это только в готовом варианте такое, и попробовала скачать все файлы к себе на компьютер, проверила их и загрузила на хостинг.
Вместо предложенных скинов я использовала свой, но результат тот же.
Вывод можно сделать один – бесплатный сыр только в мышеловке. Это не вирус, а в файле флеш, на который вы вставляете ссылку, или который закачиваете на хостинг встроена ссылка на какой-то определенный ресурс.
Я тоже иногда пользуюсь таким способом, когда создаю собственную флеш-анимацию.
И тогда человек, который скачает у меня сделанную мной надпись или картинку, а затем поставит на свой сайт, станет невольно рекламировать мой сайт, если посетитель проведет мышкой по этой анимированной надписи. Но я это делаю очень редко.
Но я могу предложить вашему вниманию небольшой код плеера, который вы можете добавлять к себе в открытку:
Этот код следует вставить между тегами:
…
Рядом (в этой же папке) с этим html-файлом разместите audio-файл с расширением mp3 (выделен красным). Если вы вставляете файл с другим названием, то в коде тоже следует тоже поменять.
- После сохранения документа и при условии, что прописанный музыкальный файл находится рядом с сохраненным файлом в предпросмотре в браузере вы сможете прослушать, как будет проигрываться музыка и как будет отображаться ваш плеер:
- Причем, по умолчанию, он будет располагаться в левом верхнем углу.
Кому-то может показаться, что таким плеером можно испортить всю открытку. В таком случае опустите его в самый низ вашей открытки. Для этого проставьте теги пробелов:
…
И целого мира мало
Добрый день. Для всех желающих решил сделать небольшой пост о том, как добавить музыку на сайт. Многим блоггерам , сайтостроителям и просто хорошим людям рано или поздно приходит такая мысль в голову.
Делая свою статью “Бриллианты навсегда” я решил снабдить ее музыкальным сопровождением и передо мной также встала такая задача. Довольно быстро я определился с выбором плеера на сайт. Им стал Uppod. Выбрал его, перебрав, наверное с десяток плееров. Вообще нравится podfm, но это плеер для подкастеров и в политике этого ресурса сказано, что нельзя добавлять музыкальные отрывки и песни целиком. Но Uppod ничем не уступает конкуренту. Его безусловные достоинства:
- малый размер
- универсальность
- легкость в использовании
На мой е-mail пришло несколько писем от посетителей сайта, где задавался вопрос “как вы поставили музыку на сайт”.
Давайте вместе это и сделаем.
Сначала заходим на сайт uppod.ru и проходим минутную регистрацию.
1
Далее выбираем – собрать плеер – файлы. Попадаем в следующее окно.
2
Жмем “Скачать”. Этот файл uppod.swf скачиваем на компьютер, а затем закидываем на хостинг, например в папку uploads, которая в свою очередь находится в папке wp-content. Путь при этом будет выглядеть примерно так http://fotoblur.ru/wp-content/uploads/uppod.swf Думаю, принцип ясен. Этот файл мы закинем на хостинг только один раз. Это собственно сам плеер и больше никаких манипуляций с ним делать не надо. Разумеется Вы указываете свой путь для своего сайта. Можно просто в строку подставить свой сайт.
3
Далее, добавляем в плеер наш музыкальный mp3 файл, который хотим увидеть на сайте. Как видите проигрыватель Uppod универсален, можно также выводить видео на сайт, фото. Мы делаем музыку, научившись это делать, можно будет таким же образом добавлять и видео.
Но, предварительно, наш музыкальный файл нужно положить туда, откуда он будет проигрываться в плеере. Я добавил mp3 файл на хостинг опять же в папку uploads. И у этого файла оказался вот такой путь http://fotoblur.ru/wp-content/uploads/Laura Matisse – Brilliance Forever.mp3
Хотя можно использовать и хранилище файлов на самом uppod.ru Музыкальный файл перед добавлением я рекомендую сжать до нужного битрейта (обычно 128 кбит/сек), чтобы уменьшить вес файла.
Далее: Жмем – аудио – файлы – плюс. Указываем название песни, как она будет отображаться в проигрывателе и в следующем поле “Ссылка” пишем путь к музыкальному файлу: в моем случае http://fotoblur.ru/wp-content/uploads/Laura Matisse – Brilliance Forever.mp3
Все это нужно для получения результирующего кода для вставки на сайт. Осталось совсем немного.
Теперь нужно придать стиль самому плееру.
4
Делаем следующее: Аудио – Стили – Плюс. Попадаем в редактор стилей.
5 (кликабельно)
Тут ваша фантазия будет в восторге. Самое главное окно – первое. Настройте размеры проигрывателя, цвет, поиграйте с остальными опциями в других вкладках. Когда вид плеера Вас устроит, а он отображается тут же справа и все изменения сразу видны, то нажимайте “Сохранить”. И следом жмите “Скачать стили”.
Вы получите файл в формате txt, примерно такого вида 123-12.txt Скачайте его на компьютер, а потом, как и в предыдущих случаях отправьте его на хостинг. Этот файл отвечает за внешний вид проигрывателя.
Возможно Вы захотите и другие стили со временем, поэтому создайте в папке uploads на хостинге еще одну папку styles и поместите файл вида 123-12.txt в эту папку. У меня получился такой путь http://fotoblur.ru/wp-content/uploads/styles/123-12.txt В другой раз, создав другой стиль плеера можно будет закинуть сюда файлы со стилями. А менять стили можно из своего аккаунта в разделе “Аудио – Файлы – Нужный файл – Редактировать – Стили – Ок”.
Теперь пропишем основные пути в настройках. Это делается один раз.
6
Прописываем путь к стилям и к файлу uppod.swf Выше мы рассмотрели, как взялись эти ссылки. Жмем “Сохранить”.
Теперь нам нужно забрать готовый код с учетом всех ссылок и стилей.
7
Идем по знакомому пути: выбираем нужный музыкальный файл, если их несколько и справа внизу нажимаем на синий квадратик. Это и есть код.
8
Этот код HTML добавляем в статью обычным способом в режиме HTML. Поздравляю ! Музыка (и видео при желании) на сайте.
Несмотря на кажущуюся сложность на самом деле все просто. Мы все уже сделали и теперь, чтобы добавить другой музыкальный файл, нужно будет только закинуть его на хостинг, добавить новую ссылку на этот файл в “Аудио – Файлы” и скачать код, так как все остальное (стили, плеер) у нас на месте.
Таким образом, мы узнали как добавить музыку на сайт и тем самым улучшить свой блог и самое главное – радовать своей музыкой посетителей сайта.
Как вставить музыку из ВК на сайт?
Для чего может понадобиться музыка? Например, вы создали свой сайт и теперь хотите выкладывать на нем:
- подборки музыки;
- запись ваших песен – то, как вы поете;
- аудио подкасты;
- и так далее.
В общем не будет вдаваться в подробности того, что можно выложить у себя на сайте, а просто рассмотрим процесс получения кода для вставки музыки на сайт!
Прежде чем куда-то что-то вставить, вам нужно создать плейлист и получить ссылку на него, для этого я написал простую инструкцию: Как создать плейлист в ВК? В ней по шагам расписано, как добавлять музыку в создаваемый плейлист, а также, в самом конце урока, написано, как получить ссылку на плейлист.
Итак, теперь, когда у вас уже есть ссылку (я на это надеюсь), приступим к выполнению простой инструкции!
Инструкция
Шаг № 1 Заходим на свою станицу в Контакт.
Шаг № 2 В левой колонке в самом низу имеются ссылки, нажимаем на ссылку – Разработчикам:
Шаг № 3 Перед вами появится страница для разработчиков, где будут ссылки на различные справочники по работе с API, нас интересует синяя кнопка примерно по центру экрана – Показать все – нажимаем на нее:
Шаг № 4 Теперь, в самом верху нажимаем на ссылку – Виджеты для сайтов:
Шаг № 5 Далее, пролистываем немного вниз и находим раздел с музыкальной иконкой под названием – Плейлист (нажимаем на ссылку или на иконку):
Шаг № 6 Появится вот такая форма – здесь все просто:
Описание цифр с картинки:
Внимание
Как вставить музыку на сайт
Рано или поздно, практически каждый веб-мастер сталкивается с вопросом воспроизведения музыки на сайте – одним это необходимо для того что бы создать какой-нибудь музыкальный архив, а другим это нужно для того что бы просто развеселить посетителей сайта и разнообразить контент страницы.
Не зависимо от цели, решение вопроса как вставить музыку на сайт может иметь несколько различных вариантов.
Музыку можно загрузить на свой сайт, а на странице где её необходимо воспроизвести достаточно, добавить специальный проигрыватель, который подключит нужный файл и сделает своё дело. Использование такого метода считается наиболее надёжным, хотя бы с той точки зрения, что все нужные файлы, включая музыку, хранятся непосредственно на вашем сервере и будут постоянно доступны.
Однако использование такого метода может стать проблемой для тех, у кого ограниченное пространство на хостинге и нет возможности загружать всё подряд. К слову, я как раз из этой группы людей – мой тарифный план предусматривает всего 1 гигабайт дискового пространства, поэтому у меня нет возможности использовать ранее предложенный вариант, и я пошёл дальше.
- Как оказалось, в интернете предложено не так много вариантов, подробно описывающих процесс вставки музыки на сайт, это даже вызвало у меня некоторые затруднения, но как говорится, кто ищет тот всегда найдёт.
- Анализируя вопрос как вставить музыку на сайт с помощью поисковой системы Яндекс, из всех предложенных вариантов я, почему то остановился лишь на одном, который как мне показалось, может соответствовать всем моим требованиям.
- К этим требованиям я в первую очередь отнёс:
- удалённую загрузку (нет необходимости хранить файлы в формате mp3 на своём хостинге)
- соответствие веб-стандартам (валидность html кода должна полностью проходить проверку)
- простоту внедрения музыки на сайт (без каких-либо заморочек и дополнительных настроек)
Теперь, давайте я расскажу подробнее о том, как это можно сделать.
Как вставить музыку на сайт – наглядная инструкция
Для того что бы вставить музыку на сайт, мы воспользуемся сервисом Яндекс Видео – да да, именно видео и пусть Вас не смущает это слово.
Переходим по ссылке «Загрузить видео» и выбираем интересующий способ – в данном случае я воспользуюсь загрузкой с компьютера.
В появившемся окне, кликнув по кнопке «добавьте ролики» мы выбираем нужную музыкальную композицию или даже несколько при необходимости. По желанию можно отредактировать название, проставить метки для вашего файла, настроить доступность и другие параметры.
Когда всё готово, остаётся лишь нажать по кнопке «Загрузить» и дождаться окончания загрузки.
По завершению у Вас появится окно с сообщением о том, что Ваши видео загружены – используя одноимённую ссылку «Перейдите к просмотру своих видео» и выберите нужный аудио-файл из списка.
Справа от загруженного ролика есть строка «Код для вставки на сайт или в блог» – используя ее, выбирайте, то, что вам нужно и внедряйте туда, куда надо. Скопировав iframe-код и разместив его на странице, Вы получаете вот такой проигрыватель.
Музыка: Darren Rhys – Lost Soul (Katakana Rmx)
Из этого примера достаточно хорошо видно, как вставить музыку на сайт всего за пару минут и теперь, таким несложным способом вы можете украсить свой ресурс, добавляя музыкальные композиции на любую страницу.
Кстати, загруженный мною файл весит чуть более 18 Мб, что в свою очередь могло бы существенно сказаться на дисковом пространстве, если бы я сохранял его на хостинге, а не предложенным способом. Представьте себе, сколько придётся платить за дополнительное место, если таких файлов будет сотня, а то и тысяча.
Ещё один пример такого размещения можно увидеть в недавно опубликованной статье «Чего хотят люди, и чего хочу я» – вставленная в неё музыка находится практически в самом конце страницы.
Надеюсь, Вам понравится использованный и что самое главное проверенный мною способ.
HTML – Урок 13. Музыка в html
Главная → Уроки html → Урок 13. Музыка в html
урока:
Фоновая музыка
Подключаемые модули
Фоновая музыка в html На web-страницу можно интегрировать фоновую музыку. Когда пользователь будет попадать на эту страницу, будет проигрываться мелодия, конечно, если у пользователя есть колонки или наушники.
Для этого нужен аудифайл в одном из форматов: WAV, AU, MIDI. Для примера можете взять такой файл в папке C:WINDOWSMedia или скачать мелодию с сайта http://midi.bun.ru.
Положите этот файл в тот же каталог, где лежат ваши html-страницы. Теперь в код любой страницы (в теги body)добавьте следующий тег:
Теперь при просмотре этой страницы всегда будет присутствовать фоновая музыка. Рассмотрим параметры тега :
- src – адрес звукового файла
- loop – число повторов мелодии (если равно -1, то повторяется бесконечно)
- balance – стереобаланс (значения от -10000 до 10000)
- volume – громкость, максимальное значение = 0 (возможные значения от -10000 до 0)
Стоит ли задавать странице фоновую музыку решать вам, но хотелось бы привести несколько доводов, почему от этого лучше воздержаться: Чаще всего у пользователя уже играет его любимая композиция или, наоборот, он сидит в тишине (может вокруг все спят) и вдруг начинает “петь” страница. Причем отключить фоновый звук пользователь не может. Что он сделает? Немедленно покинет вашу страницу и больше не вернется. Качественный звуковой файл вы добавить не сможете (он слишком большого объема), а файлы в форматах wav, au и midi качеством не отличаются. Зачем же заставлять пользователя слушать не очень хорошую музыку, когда у него под рукой, скорее всего, есть выбор музыки отличного качества. Наконец, каким бы маленьким не был звуковой файл, он съедает время на загрузку и часть трафика, а полезной информации не несет. Так стоит ли? Прежде, чем размещать фоновую мелодию подумайте об этом.
- Подключаемые модули
- Для примера всего вышеизложенного создадим html-страницу со следующим кодом:
Подключаемые модули позволяют управлять проигрыванием звуковых файлов. Здесь тоже не все просто. Когда мы встраиваем в html-страницу какой-либо объект, браузер пытается отобразить его самостоятельно. Если это простой объект (текст или рисунок), то браузер это сделает без посторонней помощи. Если объект незнакомый, то браузер попробует прибегнуть к помощи внешней программы или встроенного в браузер программного модуля (плагина), которые и отобразят этот объект. Если же нужного приложения браузер не найдет, то появится сообщение о том, где его можно скачать и как установить (в большинстве случаев, но не всегда). А по статистике лишь 5% людей станут устанавливать себе дополнительные модули, остальные 95% просто уйдут со страницы.
Композиция “Love Me Do” Beatles Здесь тег указывает браузеру вставить на web-страницу модуль управления звуковым файлом, а его параметры задают адрес музыкального файла, а также ширину и высоту консоли органов управления. Посмотрим как эту страницу будут отображать разные браузеры:
Как видите, Opera не отработал так, как ожидалось, т.е. не дала возможность управлять прослушиванием файла.
Стоит ли отказываться от музыки в html? Вряд ли, мультимедиа завоевывает интернет семимильными шагами, поэтому встраивать такие объекты иногда просто необходимо, но делать это лучше с помощью элемента , которому посвящен следующий урок.
Правда, проблему это не решит, пользователю все равно придется устанавливать дополнительные модули, но с развитием мультимедийных технологий и пользователи становятся другими и уже у многих стоят различные проигрыватели тех или иных файлов. И будем надеяться, что в скором времени установка маленького плагина перестанет быть преградой.
Предыдущий урок Вернуться в раздел Следующий урок
Скачайте одним архивом видеоуроки HTML!
Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.
Код кнопки:
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Яндекс Музыка в блоге или Как добавить музыку на сайт WordPress
Всем доброго времени суток! В Воронеже 23:59, и вроде бы пора спать, но пока не завершен процесс бэкапа рабочего сайта, сижу у ноутбука на кухне, пью чай с медом, выгоняю из себя простуду и читаю комментарии, заходя на блоги с ответными визитами.
Сегодня на сайте Rазные люди мне попалась большая обзорная статья о красивых и талантливых женщинах — оперных певицах, в том числе и наших соотечественницах. Мне понравилось, что кроме фотографий певиц и кратких биографических сведений, на странице были добавлены аудио-треки, дающие возможность услышать голос каждой из них.
Попутно вспомнил и о тех оперных исполнительницах, которые есть в моей домашней фонотеке. И тоже захотел поделиться несколькими аудиозаписями с читателями этого блога.
Поэтому, несмотря на то, что в черновиках WordPress у меня уже долгое время лежат несколько очередных статей в разной степени готовности, нужно лишь выбрать время и доделать их, пишу статью внеочередную — о музыке. Точнее о том, как добавить музыку на сайт.
Мне давно хотелось разобраться с тем, как добавлять треки в текст статьи, и вот этот час настал. В принципе, понятно, что для того, чтобы это реализовать существует не один вариант, а, как минимум, три.
Можно загрузить музыкальные файлы на собственный сервер и выводить их с помощью встроенного в вордпресс плеера или специального плагина, использовать код плеера с загрузкой треков из какого-нибудь облачного онлайн-хранилища (если это возможно) или попытаться использовать возможности iframe для вывода на странице фрагментов сторонних сайтов. Первые два варианта сопряжены с риском наказания за неправомерное использование контента, защищенного авторским правом. В последнем же случае, если сервис легальный и не позволяющий скачивать музыку, последствия и риски минимализируются. И тут я вспомнил о Яндекс Музыке.
Сегодня можно слушать Яндекс Музыку онлайн — бесплатно, без регистрации практически с любого устройства, подключенного к интернет.
И права авторские при этом не страдают, ибо Яндекс их блюдет свято ) Посетив главную страницу этого сервиса, я был приятно удивлен — многое за то время, что он был вне поля моего зрения, изменилось — в лучшую сторону.
Слушать песни на Яндекс Музыке стало удобно, сервис оброс полезным функционалом, улучшился и интерфейс.
Возможность установить Яндекс Музыку на сайт бесплатно существовала и ранее. Но в Условиях использования сервиса были прописаны вполне определенные ограничения, если кто помнит. Теперь же пункт 2.3 Условий гласит:
Любое копирование, воспроизведение, переработка, распространение, доведение до всеобщего сведения либо иное использование Материалов, Плеера или Базы данных вне рамок возможностей, предоставляемых Сервисом, а также любое их использование в коммерческих целях запрещается.
При этом Яндекс Музыка предоставляет пользователям готовые коды iframe-вставок на сайт по каждому треку. Соответственно, использование аудиозаписей происходит исключительно в рамках «возможностей, предоставляемых сервисом», и так как воспроизведение музыки фактически происходит на стороне сервиса, то и к самостоятельному воспроизведению, копированию и распространению это не относится.
Расскажу о том, как добавить Яндекс Музыку на сайт WordPress. На главной странице онлайн-сервиса в строке поиска вбиваем имя исполнителя, название группы, или выбираем из рекомендованных.
Как видим, рядом с обложкой выбранного альбома есть четыре пиктограммы: Слушать, Добавить в Мою музыку, Добавить в плейлист, Поделиться. При нажатии на последний значок выбираем кнопку HTML код и копируем его в буфер обмена.
Теперь, если в режиме Текст редактирования записи вставить этот код в статью, на странице появится плеер с возможностью слушать альбом.
Аналогичные пиктограммы имеются напротив наименования каждого аудиотрека, что дает нам возможность добавлять на сайт избранные композиции. Этот код будет работать и на других системах управления контентом, поддерживающих режим редактирования HTML.
Если же вариант, предлагаемый сервисом по умолчанию, вас не устраивает, смело жмите на изображение шестеренки справа от поля с кодом. Во всплывающем окне настроек можно выбрать размеры плеера, тему, фоновый цвет плеера и задать, будет ли при этом отображаться обложка альбома. Этих возможностей хватит, чтобы настроить внешний вид плеера под дизайн сайта.
Ну вот, так и появилась Яндекс Музыка в моем блоге. Т.к. начинался этот пост со ссылки на статью об оперных певицах, в тему приведу несколько треков двух замечательных, на мой взгляд, исполнительниц в стиле «поп-опера». Приятного прослушивания.
Помню, что в студенческие годы ради удовольствия послушать редкую музыку, приходилось ехать через весь город в фонотеку, которая в те времена располагала коллекцией в 40 тысяч пластинок, и находилась в Воронеже недалеко от Никитинской библиотеки — на улице Куцыгина.
Но с тех пор многое изменилось, теперь Яндекс Музыка популярные хиты слушать онлайн позволяет из любой точки мира, и это здорово. Достаточно иметь самый простой из современных тарифов подключения к интернет, чтобы получить бесплатный доступ к десяткам и сотням тысяч музыкальных произведений и песен. Это невероятно удобно и абсолютно легально.
И, самое главное, сервис постоянно растет и развивается, пополняется не только новинками эстрады, но и альбомами прошлых лет. Надеюсь, вам понравилась статья и мой выбор треков.
Расскажите об этой статье в соцсетях:
Как поставить музыку на сайт без плеера
Поставить музыку на сайт, или на блог, можно несколькими способами, один из которых — закачка плеера и музыкальных файлов на хостинге, а затем использование кода. Способ хорош тем, что у Вас все, что называется, с собой — Вы являетесь полноправным владельцем того, что лежит на оплаченном Вами пространстве хостинг-провайдера.
Но есть у этого способа и некоторые неудобства, а именно, чтобы поставить музыку на сайт, нужно немного повозиться — закачать файл плеера и аудиофайл на хостинг, а затем составить код для вставки в статью. Кроме того, аудиофайлы занимают место на хостинге, а их прослушивание отбирает ресурсы. Если аудиоподкастов на блоге много, и их количество постоянно увеличивается, то может наступить момент, когда блог начнет ощутимо тормозить.
Для установки музыки на сайт можно использовать не только хостинг, но и различные сторонние сервисы, такие как облачные хранилища, и сайты для прослушивания музыки.
Для начала рассмотрим одно из облачных хранилищ — облако Box.
Облако Box
Данное облачное хранилище при регистрации дает 10 Гб бесплатно, что само по себе очень неплохо. Также оно интересно своими возможностями по его использованию в качестве хранилища музыки для сайтов и блогов. Дело в том, что с этим сервисом поставить музыку — дело легкое и простое.
Для регистрации переходите на облако Box, нажимаете на кнопку Sign Up в правом верхнем углу, выбираете регистрацию Personal, заполняете поля, и подтверждаете свою почту, кликнув по ссылке в письме.
После этого Вы попадаете в свой кабинет. В последующем, чтобы попасть в кабинет, Вам нужно будет нажимать на кнопку Log In.
Файлы можно размещать, перетаскивая их в соответствующую область в облаке. После размещения они будут появляться в списке. Справа от названия аудиофайла Вы увидите надпись Share.
Справа от ссылки Вам нужно будет нажать на иконку настроек в виде шестеренки. Нажимаете на иконку, и выбираете вкладку Embed.
Подбираете размер и тему, и берете код для вставки музыки на сайт.
С помощью облака Box можно сделать и плейлист. Для этого нужно зайти в настройки ссылки, которая находится под списком аудиофайлов.
Теперь давайте разберемся с еще одним вариантом вставки музыки на сайт — с помощью сайта для прослушивания музыки ПростоПлеер.
ПростоПлеер
Данный сайт удобен для прослушивания музыки, скачивания и вставки музыки. Кроме того, Вы можете загружать на сайт свою музыку, и также затем брать код для ее вставки на сайт.
Как вставить на сайт аудио файл (музыку) с помощью HTML5
Здравствуйте, дорогие читатели блога. Не удивительно, что в последнее время медийные сайты становятся всё более популярными. На таких сайтах очень интересно находится, например можно посмотреть какое нибудь видео или же послушать отличную музыку. Но в этот раз мы будем с Вами слушать музыку, а именно научимся вставлять аудио файлы на наш сайт с помощью HTML5.
Как оказывается, что HTML5 поддерживает аудио теги, и таким образом музыку вставить на сайт очень просто. Правда, что не все старые браузеры воспроизводят аудио файл, но все современные браузеры это делают на ура.
Демо
Поддержка браузеров
Все браузеры, которые поддерживают тег — это IE9+, Chrome, Opera, Safari и Firefox. А вот ту есть ещё один нюанс, не все браузеры поддерживают все форматы аудио.
Например: IE9+ поддерживает только mp3 файлы, но не поддерживает wav и ogg.
Chrome после 6 версии поддерживает практически все форматы.
Opera 10+ не поддерживает mp3, честно, мне кажется что это её очень большой недостаток, такой популярный формат и не поддерживает. Но с wav и ogg справляется отлично.
С браузером Firefox та же самая история, что и с Оперой. За это ей огромный и жирный минус.
Safari поддерживает все форматы аудио кроме ogg.
Добавление аудио файла на сайт
Чтобы добавить аудио файл на Ваш сайт нужно между тегами и указать прямую ссылку на файл. Ссылка указывается с помощью тега . Вот как будет выглядеть готовый код:
Ваш браузер не поддерживает аудио
Как видите, что тут добавлено сразу 3 файла, таким образом если какой то браузер не поддерживает mp3 он автоматически воспроизведёт тот формат который поддерживает и так далее.
А если браузер вообще не поддерживает тег то выскочит вот это сообщение «Ваш браузер не поддерживает аудио».
Но мы же добрые люди ? И если пользователь не сможет прослушать музыку, мы дадим её ему скачать. Для этого Вам нужно добавить просто ссылки на файлы. Таким образом у нас получится следующий код:
Ваш браузер не поддерживает аудио
Название,
Название,
Название
Таким образом пользователь сможет скачать файл ?
Друзья, а вот пример наших трудов. Простой проигрыватель браузер подставляет сам.
Демо
Вот и всё, дорогие друзья. Если у Вас возникнут вопросы или трудности спрашивайте в комментариях. До скорых встреч.
» Как сделать фоновую музыку на сайте – HTML и HTML5
Всем привет!
Сегодня я расскажу, как сделать фоновую музыку на сайте используя HTML.
Это совершенно не сложно и не нужно быть гуру, чтобы создать такой эффект на сайте.
Стоит вопрос, а нужно ли это для вашего сайта? Может, вашим пользователям или читателям этот эффект будет мешать? Или даже раздражать? Ведь, если у вас, например, обучающий сайт, то музыка будет отвлекать. Если вы делаете сайт для какой-то музыкальной группы или певца, возможно, этот эффект будет классным и в тему.
- Фоновая музыка на HTML5
- Чтобы сделать на странице сайта фоновую музыку, достаточно воспользоваться тегом .
* Закрывающий тег обязателен.
Атрибуты тега :
- «autoplay» определяет воспроизведение музыкального файла сразу же после загрузки страницы.
- «autobuffer» используется в паре с «autoplay» – определяет воспроизведение музыкального файла уже в момент загрузки страницы.
- «src» – путь к звуковому файлу.
- «controls» показывает панель управления плеером.
Пример:
Тег audio не поддерживается вашим браузером. Необходимо обновить браузер!
- Закрывающий тег не нужен.
- Тег размещается между тегами .
- Атрибуты тега :
- «Balance» – управляет балансом звука между правой и левой колонками.
Если в значении указать «-10 000», мелодия будет играть в левой колонке.
Если в значении указать «10 000», мелодия будет играть в правой колонке.
Если в значении указать «0», мелодия будет играть равномерно в обеих колонках. - «loop» – устанавливает, сколько раз проигрывать музыкальный файл. Значение по умолчанию «-1» бесконечный повтор.
- «src» – путь к музыкальному файлу.
- «volume» – громкость музыки. Значение «-10 000» – минимальная громкость, а значение «0» – по умолчанию соответствует текущей громкости воспроизведения.
Пример:
текст HTML-страницы
Как поставить музыку на сайт
Порядок вывода комментариев: По умолчанию Сначала новые Сначала старые
Спам
Aleks34rusTech
(04.10.2011 15:28)
+1 Спам
Дима
(04.10.2011 17:16)
спасибо огромеое ухуууу
Спам
Aleks34rusTech
(04.10.2011 15:37)
Например у вас сайт на юкоз,страница посвещена теме и вы хотите чтоб при открытии этой страницы играла песня автоматом к теме,в файловике создаете папку music туда заливаете песню,открываете страницу на странице открываете html редактор этой страницы вставляете в любое место выше указанный код в скобки где указано вставляете ссылку к вашей песне все при открытии страницы песенка зазвучит сама
Спам
Александр
(06.06.2011 22:59)
Сасибо огромное всё работает. Искал в гугле 2.5 часа этот грёбаный код а нашол только у вас.
Спам
Max
(05.06.2011 09:59)
- А как сделать рандомные звуки?
- очень надо!
+1 Спам
Balu
(03.06.2011 12:55)
Еще раз спасибо, сам разобрался и на каждой странице теперь своя мелодия, СПАСИБО!!!
Спам
Роман
(30.08.2011 17:06)
Подскажите, сайты с прямыми ссылками .mp3?
Спам
xxx
(25.03.2011 13:43)
А чо с компа нельзя???
Спам
Nats
(10.04.2011 18:20)
Подскажите а как изменить код что бы музыка играла только на главной а на остальных не играла или на каждой страничке своя музыка? Спасибо за ответы!
Спам
Nats
(10.04.2011 18:21)
ххх: С компа нельзя.
Спам
Дима
(03.05.2011 13:35)
вы тупые мона в пу>управление дитзайном> верхняя часть сайта и вставляете код
Спам
Sniper
(20.03.2011 08:39)
А можно чтобы много песен подряд играло?
+2 Спам
Виталик
(15.02.2011 23:27)
Значет,так объясняю 1 раз ? Вы должны скачать на свой компьютер нужную вам музыку.После загрузить её в корень сайта(файловый менеджер).И там нажать на “Ссылка к файлу”. После данный скрипт вставить:Например:Панель Управления > Управление дизайном>страницы сайта.И в самый конец вставить данный скрипт.А поле ссылка к музыке-заменить на вашу ссылку которую вы скопировали.Удачи ?
Спам
женя
(06.02.2011 00:00)
у меня не чего не получается он не редактирует шаблон уменя на сайте
Спам
Дима
(07.02.2011 19:44)
а какой плагин установить надо???
+1 Спам
Balu
(03.06.2011 12:39)
Спасибо за код, все работает отлично. Подскажите, есть ли вариант сделать так, чтоб музыка не реагировала на переход на другую страницу, или чтоб играла только на главной странице? И что надо дописать, чтоб создать список песен, а не одну. Заранее спасибо!
-1 Спам
Жекоданс
(12.10.2011 21:59)
Во вы все тупые…)))
Спам
Ma'I'Ros
(14.03.2011 01:04)
Всем Здорова!!! Народ подскажите пожалуйста сайт куда можно заливать музон и получить код на него просто не очень хочется сайт нагружать!!! Все кто обратил внимание и ответил спс!!!
Спам
Андрей
(19.07.2011 10:15)
+1 Спам
hogsmit.at.ua
(18.05.2011 18:10)
Воспроизведение начинается в Интернет Эксплорере. В опере – никакой реакции, а в моззиле требует установки плагина. Все зависит от движка сайта. Если – юкоз, то можно вставить на страницу, в html редакторе.Насчет остальных – попробуйте через html
Спам
прооо
(22.07.2011 17:08)
как сделать так чтобы при переходе на другие страници музыка не начиналась с начала спс
+1 Спам
Хакер
(27.10.2011 13:55)
вставляй сылку и всё!!!
+1 Спам
www.explay-tm.3dn.ru
(23.11.2010 05:59)
Этот код можно в самый низ сайта запихнуть где вы хотите слышать музыку.
Спам
дима
(24.11.2010 12:06)
не получается((кто сожет помочь)
Спам
витек
(05.01.2011 12:28)
а какая музыка?
Спам
Muxa
(16.01.2011 22:32)
А у меня файлы не загружает
+1 Спам
Максим
(29.01.2011 17:32)
Никакой блок создавать не надо. Зайдите в панель управления, дальше управление дизайном и редактирование шаблонов. В списке выбираете страницы сайта и в контейнере head вставляете этот код. Требуется только установить плагин и перезапустить браузер. Все!
Спам
Незнайка
(07.11.2010 20:20)
Нихрена не получается!!!
Спам
K`[f
(07.06.2010 12:25)
Да куда хД?
Спам
Pirat
(15.06.2010 19:21)
а как на страницу чтоб при заходе играла
