В этой статье я рассказывал как сделать воспроизведение аудио файлов на страницах своего сайта. Затем я опубликовал статью, в которой рассказал общую идею, как сделать воспроизведение нескольких файлов на странице. И приложил для скачивания исходники своего скрипта (тестовая версия). И вот теперь я завершил тестирование и исправление «багов». Я сделал сайт, на котором развернул свой скрипт, чтобы продемонстрировать как он работает. Давайте по порядку — что нового в скрипте, как я его использую на сайте с WordPress, в конце будет ссылка на архив с исходниками, и ссылка на сайт на котором работает этот скрипт.
Как устроен новый java-скрипт аудио плеера
Во первых из каши и сумбурного кода сделал максимально ООП: классы, методы, данные. Но это всё сухая скучная матчасть, кому интересно — посмотрит исходники. Гораздо интересней новая фича. Один мой коллега Миша заметил, что если перезагрузить страницу, или переоткрыть браузер, то все настройки сбрасываются (выбранная станция, уровень звука). Спасибо ему огромное за внимательность и фидбэк. Решение нашлось незамедлительно. Аудио плеер основан на HTML5, а в этой версии стандарта есть локальное хранилище. Работать с ним из javaScropt ну очень просто.
Использование локального хранилища
Давайте посмотрим как работает локальное хранилище. Во-первых есть два типа хранилища — localStorage и sessionStorage. API у них абсолютно одинаковый. В localStorage данные сохраняются даже после закрытия браузера. sessionStorage будет почищен после закрытия страницы.
Во-вторых размер локального хранилища ограничен. Для разных браузеров он разный. Для Safari это 2,5 Мб, для остальных около 5Мб. Так что, не злоупотребляйте.
Также хочу отметить простоту обращения к хранилищу. Мы просто берем и используем объект localStorage / sessionStorage.
Перед использованием хранилища не забудьте убедиться, что браузер поддерживает его. Иначе можно словить exception.
Приведу пример использование из своего скрипта:
// Проверяем поддержку localStorage
try {
this.storageAvailable = 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
this.storageAvailable = false;
}
// Загружаем из localStorage данные
if (this.storageAvailable) {
let player_script_volume = localStorage.getItem("player_script_volume");
if(player_script_volume != null) {
this.setManulVolumeValue(player_script_volume);
}
// Сохраняем в localStorage данные
if (this.storageAvailable) {
localStorage.setItem("player_script_volume", vol);
}
Для работы с локальным хранилищем браузера можно использовать и другие методы. Вот возможные варианты API:
// Сохранить данные
localStorage.setItem("key", "value");
// Или
localStorage.key = "value";
// Или
localStorage["key"] = "value";
// Получить данные
localStorage.getItem("key");
// Или
localStorage.key;
// Или
localStorage["key"];
// Удалить запись из хранилища
localStorage.removeItem("key");
// Полностью очистить хранилище
localStorage.clear();
// Получить количество записей в хранилище
localStorage.length;
// Получить список всех ключей в хранилище
for (var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
Помимо перечисленных методов есть еще возможность работать в хранилище с датой, массивами. Также можно отлавливать события storageEvent, storageChanged.
Аудио плеер на практике
Как я уже упоминал, я не просто поигрался с параметрами и объектами. Я сделал отдельный рабочий сайт, на котором разместил свой скрипт и список радиостанций (радиопотоков). В подробных деталях расписывать интеграцию скрипта не буду, опишу в общих чертах.
- Копируем скрипт на сервер на FTP, например в шаблон нашего сайта.
- Создаем шорт-код для подключения javaScript. Просто так в редакторе подключить скрипт не получится из соображений безопасности.
- Размещаем на странице нужные блоки разметки и после них подключаем скрипт как шорт-код.
- Делаем свои кнопки и иконки, по нажатию на которые в скрипт отправляется информация и аудиопоток начинает воспроизводиться.
В архиве со скриптом есть файл test.html в котором выполнен пример использования скрипта.
Вы можете бесплатно скачать архив с исходниками на странице загрузок.