Аудио в блоге: эмбед по ссылке и загрузка файлов

Аудио в блоге: эмбед по ссылке и загрузка файлов
Содержание

В 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
```

Не удалось распознать аудио: https://example.com/some/page

Неизвестный сервис. Для файлов используйте прямую https-ссылку или путь к загруженному файлу (/media/…) на .mp3/.ogg/.wav/.m4a/.flac/.aac/.opus.

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

Комментарии

Пока нет комментариев.

Войдите, чтобы комментировать.