Как сделать музыкальный плеер

Добавил пользователь Евгений Кузнецов
Обновлено: 05.10.2024

-Рубрики

РАДИО~ТЕЛЕВИДЕНИЕ~КИНОТЕАТР (16)
ВИДЕО (15)
Пища богов (1)
Интересное Видео (9)
ADOBE AFTER EFFECT (8)
ПРАЗДНУЕМ (5)
СОЗДАЁМ ФЛЕШ (5)
Уроки SOTNIK SWF QUICKER (2)
Уроки по флешкам (2)
ТЕЛЕФОН (5)
ШРИФТЫ (3)
КОЕ ЧТО О СЕКСЕ (3)
ПРИМЕТЫ (2)
ПОГОДА (1)
HTML (13)
PHOTOSHOP (31)
WORD (3)
БАНЯ (6)
Букварь (6)
Всё для дизайна дневника (88)
Плеер (4)
Всё о YouTube (7)
Всё о любви (1)
Генераторы (32)
Гороскоп (6)
Для Ucoz (1)
Домашнее хозяйство (16)
За рулём (9)
Здоровая пища (16)
ЗДОРОВЬЕ (707)
Напитки для здоровья (123)
Народные рецепты (283)
Профилактика заболеваний (32)
Диагностика здоровья (12)
Лекарственные растения (113)
ИГРУЛЬКИ (14)
Интересно знать (9)
Интересное в инете (1)
Интересные сайты (10)
Интернет (2)
КАРТИНКИ (92)
Клипарт - Шаблоны (34)
Фоны (21)
Разделители (8)
Трафареты (2)
Комнатные и садовые растения (40)
КОМПЬЮТЕР & ПРОГРАММЫ (221)
КУЛИНАРНАЯ КНИГА (469)
Рыба (26)
МЯСО - САЛО (12)
Варенье (4)
Грибы (3)
Заготовки (124)
Салаты и закуски (52)
Соленья (57)
Кулинарные рамочки (2)
Может сгодится (0)
МОИ ФОТО И ВИДЕО (4)
Музыка (187)
Музыкальный плеер (8)
Наговоры - Заговоры - Гадания (59)
Непознанное - загадочное (22)
Нужное нашему организму (7)
Нужные инструменты (2)
Отношения (3)
Переводчики (3)
Позитив (7)
1000 ПОЛЕЗНЫХ СОВЕТОВ (20)
Психология (3)
Работы мастеров (1)
Рамки (89)
Религия (19)
Ремонт в доме (6)
Рыбалка-Природа (3)
Сад - огород (129)
Справочная (1)
Ссылки (6)
СТРОИТЕЛЬСТВО (22)
Ремонт - Реконструкция (17)
Схемы для Лиру (7)
Техника (2)
Увлечения (12)
Уроки - коды (5)
Финансы - деньги (4)
Эзотерика (5)
Электро техника (24)
Эротика (8)

-Музыка

-Всегда под рукой

-неизвестно

-Поиск по дневнику

-Друзья

-Сообщества

-Статистика

Создаём музыкальный плеер
с русским плейлистом и любым цветом.

В этом уроке я расскажу Вам, как сделать свой музыкальный

плеер с плей листом.

Для того,что бы создать плеер, нам понадобятся прямые ссылки

на музыку, которую мы будем вставлять в конструктор плеера.

Прямые ссылки на музыку, можно брать в разных местах.

Для своего урока, я воспользовался ссылками своих

сайтов (блогов) Мой мир и Привет.ру.

(урок, Как взять ссылку с сайта Мой Мир и не только. )

И так, заходим на Привет.ру

и в строке Поиск задаём то что Вы желаете найти.

Находим нужную музыку - песню.

(смотрим скриншoт 1)

Нажав на название открываем нужную песню.

(смотрим скиншoт 2)

Жмём на слово "Код для вставки".

Откроется окно с кодом.

Что бы полностью разглядеть весь код, растяните его,

потянув за край рамки.

(Смотрим сриншoт 3)

Нам понадобится часть кода, на скрине она выделена и выглядит так

Выделяем и копируем её.

НА нём мы и будем собирать свой плеер.

(Смотрим сриншoт 4)

Вводим название песни и вставляем наш код, скопированный с Привет.ру

Жмём на слово "Добавить в плейлист"

Итак, мы добавили одну песню в наш плей лист.

Для вставки второй и последующих песен, повторяем наши действия,

копируем с Привет. ру и вставляем в генератор плеера.

Прямую ссылку на песню,можно брать и с других мест,

например с сайта Мой мир,

не имеет значения, лишь бы была прямая ссылка на песню.

Хочу сказать Вам,что наш плеер может содержать до 8 - 16 песен,

всё зависит от веса музыки, на большее плеер не расчитан.

После того как мы наолнили плейлист,выбираем цветовую схему плеера.

(Смотрим скриншот 5)

Определившись с цветом плеера жмём на слово "Выбрать",

или же, созать свою расцветку плеера,

нажав на строку "Своя настройка цветовой схемы".

Создав свою схему,или же выбрав из предложенных,

жмём на слово "Посмотреть результат".

Откроется вкладка с готовым кодом нашего плеера.

(Смотри скриншот 6)

Копируем наш код плеера и вставляем к себе на ЛиРу!

Вставив наш код плеера к себе, его можно подредактировать,

увеличить или же уменьшить размеры плеера.

(Смотри скриншот 7)

Так же, если вам не понравились цвета плеера, их можно поменять в коде.

(Смотри скриншот 8)

После окончательной настройки цвета плеера,

его можно опубликовать на сайте.

(Смотри скриншот 9)

Ниже я приведу пример назначения и расшифровки некоторых настроек.

Хочу заметить, они относятся не обязательно к этому плееру,

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

autoplay = авто воспроизведение (0-нет: 1-да)

volume = Первоначальный уровень звука (от 0 до 200)

showstop = Установите значение данного параметра равным 1, чтобы кнопка "Стоп" отображалась на панели плеера, в противном случае укажите showstop=0

showinfo = Установите значение данного параметра равным 1, чтобы кнопка "Информация" отображалась на панели плеера, в противном случае укажите showinfo =0.

showvolume = Установите значение данного параметра равным 1, чтобы кнопка "Уровень Громкости" отображалась на панели плеера, в противном случае укажите showvolume=0.

showslider = Установите значение данного параметра равным 1, чтобы отображать панель плеера, в противном случае укажите showslider=0.

loadingcolor = Задает цвет полосы загрузки.

bgcolor = Задает фон плеера.

bgcolor1 = Задает первый (верхний) цвет фона плеера (в случае использования градиентной заливки).

bgcolor2 = Задает второй (нижний) цвет фона плеера (в случае использования градиентной заливки).

buttoncolor = Задает цвет кнопок.

buttonovercolor = Задает цвет кнопок при наведении мыши.

slidercolor1 = Задает первый (верхний) цвет градиентной заливки бегунка временной шкалы.

slidercolor2 = Задает второй (нижний) цвет градиентной заливки бегунка временной шкалы.

sliderovercolor = Определяет цвет бегунка при наведении мыши.

textcolor = Задает цвет текста.

Вот мы и создалисвой полноценный музыкальный плеер, с любимыми исполнителями и с русскими названиями плейлиста!

Для Вас урок создал:

Рубрики:

Всё для дизайна дневника
Музыкальный плеер

Метки: музыкальный плеер с плейлистом

Процитировано 201 раз
Понравилось: 59 пользователям

. на радось. возникнут вопросы,пишите.

Спасибо большое! Даже мне, почти блондинке, все понятно. Если что-то не получится, буду стучаться. не против?

конечно же, в любое время, дня и ночи!

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

всегда пожалуйста!

Спасибо большое за урок, процитировала,надо разбираться!

Спасибо за подробный урок! Хотя мне и в Любашином посте все понятно, но возьму и ваш для новичков, им легче будет разобраться. ))

Спасибо за подробный,доступный урок.Я летом видела ваш пост..но почему-то тогда не процитировала..Пробовала,все получилось..только со ссылками были проблемы.
А по уроку все понятно..очень побробно все расписано.Благодарю вас и в этот раз цитирую с благодарностью..)

Спасибо огромное за подробное описание. Чуть голову не сломала, как мне сделать такой плеер.
Только вот беда, если сделаешь ошибку приходится удалять весь плейлист.Или я ошибаюсь?

Да, это так. при созлании плейлиста, нужно быть внимательнее. и, совет, конструктор не любит большой список,большой вес музыки. если много песен в плейлисте, плеер не играет, испытано. загружайте не более 12 - 15 песен

Вчера пыталась создать там плеер. Вставляла в плейлист 9 песен, а плеер не создавался. Переделывала несколько раз.Но так чегой-то и не получилось. Вернулась на свой любимый сайт создания плеера Привет ру. Только там последнее время не закачивает с компьютера и приходится заимствовать песенки у других пользователей.
Спасибо вам за ответ.

буквально за 8 мин.собрал в конструкторе плеер, всё работает. скорее всего вы не корректно копируете прямую ссылку на песню,смотрите внимательно скриншёт-3. а то что на Привет.ру не загружается музыка, это правда, сам не мог загрузить

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

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

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

В настоящее время, когда в магазинах изобилие всевозможных гаджетов; планшетов, смартфонов, mp3 плейеров, может возникнуть вопрос для чего собирать цифровое устройство дома, своими руками? Дело это непростое, да и удовольствие не из дешевых. Но зачем в советское время собирали детекторные приемники, приемники на одном или нескольких транзисторах. Ведь и тогда в магазинах были в продаже так называемые “транзисторы”, маленькие переносные радиоприемники с хорошим дизайном, да и по своим параметрам часто превосходящие самодельные. Дело в том, что радиолюбители по натуре люди творческие, и никогда не пойдут в магазин покупать что либо, если такое же устройство или аналог, можно собрать своими руками. Так произошло недавно и со мной. Несмотря на то, что есть и mp3 плейер и плейер на телефоне, решил собрать аудиоплейер своими руками. Просматривая недавно радиолюбительские сайты, на одном интернет ресурсе нашел схему интересного и относительно простого аудио плейера Wav файлов. Если кто-то не в курсе, что это за формат, Wav, поясню, это формат аудиофайлов, используется часто в работе музыкантами. Почему именно Wav, а не более популярный в широких кругах mp3? Аудио плеер Wav файлов собрать значительно легче, чем mp3 файлов.

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

Схема плеера

Файлы Wav формата хранятся на micro SD флешке, подключенной в устройстве через SD адаптер. При желании если позволяет опыт, можно переразвести печатную плату и подключать micro SD флешку через собственный разъем. Аналогичный разъем стоит в сотовых телефонах. При этом нужно помнить, что номера контактов SD флешки не соответствуют номерам контактов micro SD флешки. Список контактов обоих флешек с нумерацией приведен на следующем рисунке:

В устройстве, которое планируется как переносной аудио плеер с питанием от аккумуляторов, будут применены 2 последовательно соединенных б\у аккумулятора от сотовых телефонов на 3.7 вольта каждый. Привожу рисунок разведенной мною печатной платы из программы sprint layout:

Распечатанный рисунок на печатную плату был переведен ЛУТом. Перевелось в принципе нормально, за исключением трех контактов стабилизатора, с левого края платы.

Вместе эти два аккумулятора, которые выбрал, дают 7,4 вольта. Так как для питания карты памяти необходимо питание 3.3 вольта, решено было питать все устройство, в том числе и микроконтроллер от стабилизатора 3.3 вольта в корпусе ТО-220. Тут использовал AZ1085-3.3. Стабилизатор без радиатора должен легко выдавать стандартный 1 ампер, что для моих целей более чем достаточно. Так выглядит стандартный корпус стабилизатора в ТО-220.

Если применить для питания карты памяти отдельный стабилизатор на 3.3 вольта, думаю даже в корпусе ТО – 92 будет достаточно. Тогда микроконтроллер можно будет питать от стандартных 5 вольт. Также на печатной плате были установлено гнездо Джек-3.5 стерео, в котором запараллелил оба канала, чтобы звук был хоть и моно, но в обоих наушниках. Так выглядела плата после травления:

Контакты стабилизатора перенеслись при ЛУТе не полностью, и были подрисованы перманентныим маркером. Травить предпочитаю лимонной кислотой и перекисью водорода:

Питание планируется помимо аккумуляторного, стационарное, через гнездо, от нестабилизированного адаптера питания, с которого подается 11 вольт. В обвязке стабилизатора, в отличие от стандартных конденсаторов на 0.33 и 0.1 микрофарад, которые ставятся в схеме на 7805, должны были быть применены танталовые конденсаторы на 10 микрофарад по входу и на 22 микрофарада по выходу. Поискав в своих закромах, нашел 3 нужных конденсатора на 10 микрофарад, по выходу поставил 2 параллельно. Управляется устройство тремя кнопками, 2 из них без фиксации, это Выбор директории Dir1\Dir2 и Play\Select, и 1 с фиксацией, Repeat, то есть повтор. Когда она нажата, трек повторяется бесконечно. Залуженная плата и просверлены отверстия:

В этом варианте устройства выбор трека кнопками, подключенными к контактам микроконтроллера 6,7,8,9 не осуществлен. Также не используется UART, контакты МК 2,3 и включение эффектов Монстер и Хелиум, контакты 12,15. SD адаптер временно прикрепил к плате на скотч, впоследствии закреплю на термоклей. Вот собранное устройство:

При воспроизведении мигает зеленый светодиод, при включении горит также зеленый. При ожидании подключения флеш карты, постоянно мигает желтый светодиод. При переключении с последнего трека на первый, также 1 раз мигает желтый светодиод.

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

Для пакетной конвертации файлов хорошо подходит Weeny Free Audio converter. Формат файлов должен быть WAV, 8 бит, 32000 герц, Моно. Файлы должны быть размещены в двух папках созданных в корневом каталоге флешки. Папки должны называться (1) и (2), без скобок. Начинаться файлы должны с букв английского алфавита, первый файл, a_любой текст, второй, b_любой текст, третий, c_любой текст, d… и так далее. Например, как на следующем рисунке:

Поддерживаются любые Micro SD карты объемом до 2 гигабайт. Карты памяти SDHC или SDXC не поддерживаются. Рисунок как выставлять фьюзы для программы uniprof приведен ниже:

Видео работы плеера

Кроме основной функции, такое устройство можно задействовать как электронный звонок со сменными мелодиями. Печатная плата для программы sprint layout с прошивкой для attiny2313 выложены в архиве. Автор проекта – AKV.

В это статье вы прочитает о том, как сделать аудиоплеер на JavaScript и HTML, если вы задаётесь вопросом как это сделать, то вам сюда.

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

Создание аудиоплеера:

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

Начнём с HTML, тут вообще не чего сложного нет, надо просто написать тег внутри документа и добавить атрибут controls .

Как видите стандартный HTML плеер выглядит красиво, но есть одна проблема, его возможности ограниченны, вы можете только останавливать трек и менять громкость и всё, что на мой взгляд не достаточно, поэтому мы уберём атрибут controls , после чего у нас будет пустой экран.

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

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

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

Вот что получилось.

У нас появилась не большая дорожка, серого цвета, также при проигрывание она будет закрашиваться в почти чёрный цвет, за счёт увеличения

JavaScript:

Пришло время самому главному, к созданию основной логике на чистом JavaScript, для начала мы возьмём все элементы из HTML.

Мы тут просто взяли элементы с которыми будим работать, элемент берём через id, а остальные через селектор.

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

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

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

Теперь перейдём к функции для переключения песен.

В начале мы в функции передаём индекс песни, которая нам нужна, следующие меняем путь до трека, с помощью audio.src назначаем путь до песни которая нам нужна, взяв название песни из playlist .

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

Последнее это запуск песни через audio.play() .

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

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

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

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

Если условие верно, то увеличиваем переменную treck и меняем песню используя функцию switchTreck .

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

Далее, выпаял всё что мне мешалось, или требовало отдельного места:

Выпаял USB разъём и установил на штатное место в корпусе, соединив проводом.

Установил microUSB разъем в штатное место корпуса, подпаявшись к плюсу и минусу эмалированным проводом от трансформатора(он у меня будет использоваться часто).

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

Установил подходящий, по размерам, аккумулятор от звонилки на 900mAh и определил место для платки контроля заряда\разряда. Установил светодиод для индикации процесса заряда акб(зелёные термоусадки). Просверлил отверстия под динамик и обклеил алюмишкой крышку. Установил в крышку корпуса динамик от звонилки(звук не очень, да и места было впритык, хороший динамик не установить, но этот динамик скорее индикатор того, что плеер работает и песни читает, т.к. все время слушаться будет в наушниках). Вырезал паз и установил микропереключатель для вкл\выкл плеера.

На фото не видно, но я скажу своими словами — MP3 плата с завода идёт с отвратительными выходными конденсаторами. Для хорошего звука в наушниках, необходимо их заменить на более емкие — 10-200 мкФ, что я и сделал.
Долго думал над кнопками, в итоге, пришел к такому варианту(отверстия для выводов проделал нагретой иголкой, и потом заливал суперклеем.

Вид со стороны выхода наушников:

Вид сверху:

Вид спереди:

Вид во время зарядки(установил непростой светодиод а slow flash LED, который меняет цвета)

ИТОГ: Получился лёгкий, компактный, долгоиграющий MP3 плеер. Для удобства, использую tiny usb флешку(не выпирает, немного торчит, но не критично). Разъём для карт памяти не стал устанавливать, т.к. уже не хватало места.
Время работы при средней громкости ~ 30 часов.
Используемые компоненты:
Slow RGB LED-$0.50
Плата контроля заряда\разряда-$1.61
Микрокнопки-$4.59
Батарея(не покупал, была от старого телефона)
Корпус, к сожалению, не нашел… на али его уже не найти(может плохо искал). Но в данном обзоре, я хотел показать, что можно сделать портативный плеер буквально из подручных средств, и корпус в Вашем случае, может быть абсолютно любой.

Читайте также: