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

2 июля 2019

Советы

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

В данной статье, рассмотрим как загрузить аудио файл на сайт и разместить его для воспроизведения на странице сайта. Опустим подробности что это и как работает, сразу перейдем к делу, скажем только что будем использовать аудио теги поддерживаемые HTML5.

1. Загружаем аудио файл

Открываем систему управления сайтом TSAdmin, переходим в раздел "Файлы". По умолчанию открывается вкладка с изображениями, кликаем по вкладке "Показать файлы".

Правой клавишей мыши кликаем по папке "files".

В выпадающем списке выбираем "Создать папку".

Назовем папку "audio" и нажмем "Ок".

Выбираем папку кликнув по ней левой клавишей мыши и жмем "Загрузить".

Выбираем на компьютере файл который необходимо загрузить и добавляем его в папку.

Загруженный файл будет выглядеть так:

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

2. Устанавливаем аудио плеер на страницу сайта

В структуре сайта находим страницу, на которой необходимо разместить плеер. Открываем ее. 

Текстовой редактор переключаем на "Источник".

В нужном месте вставляем следующий код:

Где /upload/files/audio/ это путь до файла а fly.mp3 это имя и расширение самого файла.

В редакторе это будет выглядеть так:

Кликаем "Сохранить".

В редакторе плеер будет выглядеть так:

На самом сайте установленный плеер будет выглядеть так:

Если у пользователя установлен устаревший браузер, который не поддерживает тег <audio>, будет отображаться сообщение «Ваш браузер не поддерживает аудио».

Что получилось у нас, вы можете оценить тут: