Аудиоплеер для контента.

+35
5.06K

Когда-то по заказу Sam Hain делал поле для загрузки и проигрывания аудиофайлов стандартным аудиоплеером html прямо в окне просмотра записи.
Так как заказчик не против, чтобы я поделился этой разработкой, выкладываю здесь.

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

  1. ---
  2. id: 4
  3. url_key: 64fea947
  4. name: '<audio controls="controls"><source src="/upload/000/u1/b0/a4/music.mp3"></audio>'
  5. size: 12085334
  6. path: 000/u1/b0/a4/music.mp3


Выглядит это так:
Иллюстрация

Итак, что нужно для установки:
1. Скачать поле по ссылке и установить обычным способом через Компоненты — Установить пакет дополнения
2. Создать в нужном типе контента поле типа файл с любым системным именем. Тип поля выбрать «Аудио». Выставить допустимые разрешения (mp3, wav, wma) и максимальный размер.

Иллюстрация

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

05.05.2018
Все переделано без всяких хуков. Просто переделал (изменил две строки) поле «file».
Теперь достаточно просто добавить в тип контента поле «Аудио».

Скачать можно здесь:
Скачать поле «Audio»
Установка стандартным методом из админки.

0
vikont vikont 4 года назад #
Однозначно, Спасибо! Очень пригодится.
Но лучше бы как то вставлять в любом месте текста и не один, а любое количество аудио файлов.
Если есть такая возможность, подскажите какой код надо вносить в текст, чтобы получить возможность вставлять аудио файлы?
+1
Ris Ris 4 года назад #
В любом месте текста вставляется <audio controls=\"controls\"><source src=\" ссылка на музыку\"></audio>
Главное, чтобы ссылка была.
0
vikont vikont 4 года назад #
Спасибо! Попробую помудрить с TinyMCE вставку кода через кнопку с полем для ссылки.
0
Евгений Евгений 4 года назад #
Для нужного типа контента попробуйте подключить несколько полей audio, по идее сколько полей подключите, столько аудио файлов и можно вывести
0
vikont vikont 4 года назад #
Сделал по инструкции, закачал с заменой, прописал поле audio с типом Файл и т.д.
Вставляю код со ссылкой, файл закачан на сайт. Картинка аудиоплеера появляется, но не активная, обновляю страницу становится активной, но при попытке проиграть вновь не активная.
Закачиваю файл музыки через поле - точно такое же поведение.Файл расширением WMA

C MP3 полный порядок. Все работает!
Если вставлять музыку кодом, то можно поле не прописывать вообще!
Сколько музыкальных файлов вставишь, столько и появится в статье.
Можно проигрывать хоть все файлы одновременно!

Осталось дело за малым - выяснить почему не все форматы работают и сделать вставку прямо из редактора!
0
Ris Ris 4 года назад #
Вставляю код со ссылкой, файл закачан на сайт. Картинка аудиоплеера появляется, но не активная, обновляю страницу становится активной, но при попытке проиграть вновь не активная.
Значит ссылка неправильная.

Если вставлять музыку кодом, то можно поле не прописывать вообще!
Ну конечно. Весь смысл хука - автоматом прописывать тэг <audio> в имя файла.

Закачиваю файл музыки через поле - точно такое же поведение.Файл расширением WMA
Возможно html плеер не ест wma. Каюсь, не проверял.

сделать вставку прямо из редактора!
Попробую сделать.
0
Ris Ris 4 года назад #
Да, список воспроизводимых форматов ограничен:
http://htmlbook.ru/HTML/audio
0
vikont vikont 4 года назад #
Я пока не понял, но TinyMCE начал вставлять аудио файлы через кнопку Вставить видео!
В самом плагине MEDIA прописана эта возможность, но что то не получалось!
Все файлы и хуки вернул в исходное состояние. Но продолжает вставлять.
Подозреваю, что причина в хуках которые прописались в базе.
0
vikont vikont 4 года назад #
Вставка Аудио работает только на двух типах контента Новости и Посты. Так и должно быть?
0
Ris Ris 4 года назад #
Спойлер
scratch
0
vikont vikont 4 года назад #
С полем и у меня заработало:
Спойлер
А вот с кодом так и не работает:
Спойлер
Спойлер
+1
Ris Ris 4 года назад #
Вы занимаетесь черной магией и колдовскими обрядами, вместо того, чтобы понять, что происходит.
Название файла берется из YAML-a
name: '<audio controls="controls"><source src="/upload/000/u1/b0/a4/music.mp3"></audio>'
и типографированию не подвергается. Типографирование - это удаление из текста HTML всех тегов, кроме разрешенных.
Если Вы хотите размещать в тексте HTML всякие дикие тэги - уберите галочку "обрабатывать типографом" в настройках полей, где эти тэги предполагается размещать.
0
vikont vikont 4 года назад #
Ris:
Вы занимаетесь черной магией и колдовскими обрядами
За "черную магию" ответите по все строгости Магии... превратитесь в двоичный код... shock laugh
Rls:
и типографированию не подвергается. Типографирование - это удаление из текста HTML всех тегов, кроме разрешенных.
БЛИН!!!! А вот тут я круто лоханулся! Спасибо что ткнули носом! Типографирование оказалось включеным.... Давненько так не вляпывался... zst
0
kseniya kseniya 4 года назад #
Почему не добавите в каталог?
0
Ris Ris 4 года назад #
Это ж не полноценное дополнение, а так...
0
Рачей Рачей 3 года назад #
Это очень хорошее дополнение!
+3
Ris Ris 3 года назад #
Переделал в виде нового поля (поле file с измененными двумя строками).
Ссылка на скачивание в тексте поста.
+1
Шляпник Шляпник 3 года назад #
Очень полезное дополнение ) Сам файл грузится на сервер или можно использовать облачные хранилища (с яндекса вставлять или с гугла)?
0
Ris Ris 3 года назад #
Грузится на сервер.
0
Светлана Светлана 3 года назад #
Дополнение очень нужное, установила через панель управления, создала поле audio для постов, но почему-то "ничего не происходит" (как на скриншоте). Не подскажете, в чем может быть дело, что могла упустить?
0
Светлана Светлана 3 года назад #
Дополнение очень нужное, установила через панель управления, создала поле audio для постов, но почему-то "ничего не происходит" (как на скриншоте). Не подскажете, в чем может быть дело, что могла упустить?

+1
Ris Ris 3 года назад #
Я сейчас перепишу пост. Есть более простой метод.
+1
Ris Ris 3 года назад #
Переписал. Сделайте по инструкции.
Если что - пишите в личку.
+1
Светлана Светлана 3 года назад #
Теперь работает! Спасибо большое smile
+1
olgatcpip olgatcpip 3 года назад #
До чего же приятно работать с компонентом, с которым нет проблем!
Благодарю за статью. Большущее спасибо за бесплатный компонент. Если мне денег заплатят за работу, постараюсь перечислить... 10%
0
Павел Павел 2 года назад #
Спасибо за фишку. У кого не загружается, попробуйте указать размер в файле .htaccess , если нет, создайте его в корне сайте и пропишите, где 5м это вес загружаемого аудио файла.
php_value upload_max_filesize 5M
php_value post_max_size 5M
0
Sugar Sugar 2 года назад #
Все сделано красиво, слушаю музыку, спасибо)
0
Sugar Sugar 2 года назад #
Добрый вечер, это мне?)
+1
Ris Ris 2 года назад #
ignat
Мне грех жаловаться на отсутствие благодарности от Инны.
+1
Павел Павел 2 года назад #
Классно, а кто доделал чтобы вместо name название трека можно было написать при загрузке? Или хотя бы как убрать этот нейм. У меня на плеере сторонним отображается
+1
Владимир Савенко Владимир Савенко 2 года назад #
а можно как то запретить скачивание ?
0
DeDja DeDja 2 года назад #
Владимир Савенко
Добавить плеер - /forum/thread29782-5.html#317801
+1
Ris Ris 2 года назад #
Файл \system\fields\audio.php строка приблизительно 60
Добавить controlsList="nodownload". То есть, чтобы было так:
Код PHP:
  1. return $file['name'].'<br/><audio controls="controls" controlsList="nodownload"><source src="/upload/'.$file['path'].'"></audio>';
0
DeDja DeDja 2 года назад #
Та же строка с плеером (mediaelement) -

return $file['name'].'
<br/>
<br/>
<audio id="player1" preload="none" controls="" width="100%" <source src="/upload/'.$file['path'].'" type="audio/mp3"></audio>
<br/>
<br/>
';

О синхронизации:
при наличии нескольких треков - звучит только один выбранный трек.
+1
Павел Павел 2 года назад #
Простите, не понял куда эту строку и как дописать? Плеер не адаптивный, у меня на мобилке звук за экраном
0
DeDja DeDja 2 года назад #
Павел
Подключение адаптивного плеера (mediaelement) здесь:
/forum/thread29782-5.html#317801

Для этого плеера строка 60 в файле
\system\fields\audio.php заменяется на строку выше.
+3
Денис Васильевич Денис Васильевич 2 года назад #
Есть такая штука http://demo5.goodmade.ru/music/2-pesni-nikolaja-emelina.html
Всё никак не могу прикрутить Аякс загрузку файлов. Если бы кто помог с этим, опубликовал бы дополнение бесплатно.
Грузить много файлов обычным способов это совсем не то и не надёжно.
+2
Scythian Scythian 2 года назад #
Здравствуйте! Это поле? Сколько стоит?
0
Голдман Сакс Голдман Сакс 2 года назад #
Всё хорошо, но плеер не отображается в виджетах.
+2
Scythian Scythian 2 года назад #
а должен в виджетах отображаться? Это вроде поле...
0
Голдман Сакс Голдман Сакс 1 год назад #
Поле "фотография", например, отображается. И все другие поля отображаются. А это - нет.
0
Викторыч Викторыч 3 месяца назад #

Вопрос по дополнению: на Modern все то же самое проделать, никаких нюансов? 

Хорошая штука, буду пробовать, а то в TinyMCE то грузится аудио через значок «Видео», то не грузится, непредсказуемо себя ведет. Запрет на скачивание тоже поставлю, а то будем огребать от правообладателей (хотя… так и так будем))

0
Викторыч Викторыч 3 месяца назад #

Ris, скачивание поломалось! Почините, пожалуйста!

0
Ris Ris 3 месяца назад #

Я сам файлы не удалял, видимо, пропало при переезде.

Ну, значит сделаю заново завтра...

+1
Ris Ris 3 месяца назад #

Вот файл:

disk.yandex.ru/d/xpaFkHb19DinGQ

Установка штатным способом из админки.

Еще от автора

Сверхлёгкий webserver на Alpine linux
Не знаю, как нормальных людей, но меня всё время мучает вопрос, зачем для размещения небольшого сайта на виртуальном сервере я вынужден устанавливать
Накрутка рейтинга и кармы пользователям, контенту и фото.
По многочисленным просьбам изготовил новый инструмент для изменения администратором сайта рейтинга и кармы пользователей.
Авторизация по любым полям из профиля и по API
Представляю уважаемому сообществу небольшое дополнение для доработки авторизации вашего сайта, а также для интеграции двух сайтов на Instantcms друг с
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.