Аудио в блоге: эмбед по ссылке и загрузка файлов
Содержание
В bl0g.ru появился фенс-блок для аудио: по ссылке на страницу популярного музыкального или подкаст-сервиса собирается встроенный плеер, а прямые ссылки на файлы превращаются в нативный <audio>. Разбираемся, что поддерживается и как это выглядит в разметке — все примеры в статье живые.
Эмбед по ссылке: фенс audio
Плеер встраивается так же, как видео в прошлой статье: ссылку нужно обернуть в блок с языком audio, по одной ссылке на строку.
```audio
https://open.spotify.com/track/4PTG3Z6ehGkBFwjybzWkR8
```
При рендере фенс распознаёт сервис по адресу, вырезает идентификатор и собирает ленивый iframe — плеер подгружается только когда до него долистали. Вот Spotify вживую:
В одном блоке можно перечислить несколько ссылок — плееры встанут друг под другом:
```audio
https://music.yandex.ru/album/24249332/track/111305877
https://open.spotify.com/track/4PTG3Z6ehGkBFwjybzWkR8
```
Кто поддерживается
| Сервис | Какая ссылка подходит |
|---|---|
| Spotify | open.spotify.com/track/…, /episode/…, /album/…, /show/… |
| Яндекс.Музыка | music.yandex.ru/track/…, album/<id>/track/<id>, album/<id>, users/<user>/playlists/<id> |
| Apple Podcasts | podcasts.apple.com/.../podcast/.../id<цифры> |
| SoundCloud | soundcloud.com/<автор>/<трек> |
| Mixcloud | mixcloud.com/<автор>/<микс>/ |
Нюанс про SoundCloud: сервис использует Cloudflare-блокировку по гео — для части российских сетей встраиваемый плеер может не загрузиться, хотя сам сайт открывается. Если планируете массово встраивать SoundCloud для российской аудитории — проверьте открываемость плеера из целевой сети; формально фенс его поддерживает.
Свои файлы: нативный <audio>
Если ссылка указывает прямо на аудиофайл — .mp3, .ogg, .wav, .m4a, .flac, .aac или .opus — фенс не подключает сторонний сервис, а превращает строку в нативный HTML5-плеер браузера. Подходит и полный https-адрес, и путь относительно сайта, как у файлов, загруженных через редактор.
Вот пример, озвученный синтезом речи прямо в файл (без записи с микрофона) и загруженный кнопкой из редактора:
```audio
/media/uploads/videos/demo.mp3
```
Нативный <audio> не является отдельным сервисом: файл отдаёт сам блог, так что никакой Cloudflare-гео-блок не помешает, а доступ к дорожке всегда стабилен.
Кнопка загрузки в редакторе
Рядом с кнопками загрузки картинки и видео в тулбаре редактора появилась кнопка с иконкой нот. Нажмите, выберите аудиофайл — он уйдёт на сервер, а в текст на позицию курсора встанет готовый фенс со ссылкой.
Размер лимитируется настройкой сайта audio_max_size, по умолчанию — 50 МБ; загруженные файлы живут по постоянному адресу внутри /media/uploads/.
Поддерживаемые расширения для загрузки: .mp3, .ogg, .wav, .m4a, .flac, .aac, .opus. Самый совместимый и универсальный формат для <audio> — mp3: он проигрывается во всех браузерах и быстро отдаётся.
Если ссылка не распознана
Как и видео-фенс, аудио не молчит при ошибке: нераспознанный адрес превращается в плашку с пояснением, и остальная статья не страдает.
```audio
https://example.com/some/page
```
Так же, как с видео, голые ссылки в абзацах никогда не становятся плеерами сами — аудио появляется только там, где автор явно попросил фенсом или через кнопку.
Комментарии
Пока нет комментариев.
Войдите, чтобы комментировать.