Как установить музыку на сайт или блог за несколько минут? Пошаговая инструкция.

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

P.S. Заметка написана уже давно, поэтому, чтобы долго не мучиться (и если вам нравится вид плеера на моих страницах), установите компактyый плагин Compact WP Audio Player и настройте его. Если день настраивать, стандартный код найдете в моих комментариях внизу. А заодно и свой коммент оставьте, плиз! Удачи!

Долгое время я лишь по хорошему завидовала, а потом "загорелась" установить музыку и на своем блоге, а также на своих одностраничных сайтах. Прочитала уйму статей и уже было отступила, так как везде предполагалась работа с html-кодом. Я уважаю html-код ровно до той степени, когда его нужно просто скопировать и в нужное место вставить. Стараюсь всегда совершать минимум усилий, в потому все, о чем пишу, требует, как правило, пару-тройку минут вместе с изучением. И вот неожиданно на одном из факультативов совсем на другую тему мне попался такой вот чудо-конструктор! Здесь основное время уходит на то, чтобы найти в интернете подходящую музыку в mp3-формате. Как искать и скачивать музыку я объяснять не буду, так как сейчас это любой ребенок может сделать. Будем считать, что такой mp3-файл у вас на компьютере уже есть. Далее, по шагам:

1. Заходим в конструктор по ссылке: https://www.flv-mp3.com/ru/mp3/ . И здесь вы видите строку для заполнения, куда нужно вставить прямую ссылку на mp3-мелодию, то есть ее адрес в Интернете. Если такая ссылка у вас есть, то переходите сразу к пункту 3. Однако не всегда эту ссылку так просто получить. Скачать музыкальный файл легко, а вот ссылку получить - нет. Кроме того, если хозяин уберет ее с текущего адреса, то и вы останетесь без мелодии. Поэтому давайте рассмотрим случай, когда уже имеющуюся на вашем компе мелодию нужно поместить обратно в Интернет, но теперь уже на "хозяйских" правах, и получить необходимую прямую ссылку.

2. Я опишу свой вариант, когда доменное имя создано на хостинге Джино (Jino) . Однако думаю, что аналогично можно создать ссылку и на любом другом хостинге. Главное, понимать смысл. Итак, вводим логин-пароль и заходим в Контрольную панель - Файловый менеджер. Открываем папку domains и создаем субдомен. Я создала папку с именем music.multi-marin.ru. У вас он, понятно, будет свой. Внутри субдомена music.multi-marin.ru создаем папку, куда будем помещать музыкальные файлы. Я назвала ее relax и буду помещать туда только приятную релаксирующую музыку. Для другого типа музыки создам новую папку. Главное, чтобы самому было ясно, какого жанра mp3 файлы там находятся. И наконец, выбираем на компьютере свой музыкальный файл и загружаем его в папку relax. Теперь требуемая прямая ссылка на музыкальный файл у нас в руках!

3. Возвращаемся к нашему конструктору п.1. Теперь нам надо правильно задать параметры сборки. Моя прямая ссылка выглядит следующим образом: https://music.multi-marin.ru/relax/Muzyka-super.mp3. У вас она будет, понятно, своя, но в ней должно присутствовать имя субдомена, имя папки с музыкой и имя самого музыкального файла. - Сопроводительную Надпись я задала только страницах Об авторе и Личный контакт. А вот Размеры плеера я всегда задаю разные, по умолчанию это 470х70, как на моей странице Об авторе. Также я отмечаю в Автозапуске опцию Да, чтобы музыка начинала играть сразу же при открытии страницы. - Цвет плеера по умолчанию задан белый, поэтому, если вы хотите внести сюда элемент творчества, то здесь два варианта. Либо выбрать какой-либо цвет из выпадающего меню. Например, на своей странице Содержание я выбрала серый цвет. По желанию можно выбрать и более продвинутую цветовую гамму из предложенных Скинов. Я выбрала скин gold для своей страницы Личный контакт и скин pattern1 для страницы Об авторе. Можно загрузить и свой собственный скин, но я этим заниматься не стала. Теперь, чтобы получить html-код, нужно щелкнуть по красной виртуальной кнопке внизу конструктора!

4. Чтобы не потерять какого-либо элемента html-кода выделяем его следующим образом. Щелкаем правой клавишей мыши по окну с кодом и в выпавшем окне выбираем строчку Выделить все. Видим,что все поле окрасилось синим цветом и снова щелкаем правой клавишей мыши в любом месте кода и выбираем в выпавшем окне функцию Копировать. Здесь же мы видим общий вид плеера и слышим музыку. По кнопке Редактировать можно вернуться и внести необходимые изменения. Советую при этом обратить особое внимание на опцию Автозапуск, так как при возврате она сбрасывается на стандартное значение Нет.

5. После того, как html-код скопирован идем на свой сайт или блог и вставляем этот код в нужное место. Независимо от того, на каком движке установлен ваш блог, или в какой программе сделан одностраничник, важно помнить, что вставку кода всегда производим в кодовой части, а не в визуальном режиме. Мой пример на скриншоте сделан для движка WordPress. Обратите внимание на открывающий и закрывающий теги <object> </object>. Они являются началом и концом вставленного кода.Таким образом, если вам не понравилось расположение плеера, можно скопировать весь html-код, включая теги <object> </object> и переставить в новое место, уже не обращаясь к конструктору плеера. Если вам понадобилось отцентрировать ваш плеер, то добавляете открывающий и закрывающий теги <center></center> в самом начале и в конце кода. При этом, как видно из скриншота, в визуальном режиме плеер будет выглядеть совсем не так, как в режиме Просмотр, поэтому не пугайтесь и переходите в режим просмотра. На всех своих страницах я поместила плееры разного размера, цвета и в разных местах специально для примера и буду признательна за обратную связь, какой плеер наиболее "экологичен", если можно так выразиться?