Как настроить SoundCloud Audio Player

Потоковое аудио было в Интернете с 1990 года и сейчас не так много популярных платформ потокового аудио. Одним из самых популярных является SoundCloud, который имеет некоторые явные преимущества перед конкурентами, включая простоту встраивания.

Хотя встроенный проигрыватель очень удобен и отзывчив – вы можете поместить его на боковую панель, на пост или домашнюю страницу – вы можете ограничить его настройку. Вы можете только изменить цвет и размер, прежде чем делиться или встраивать его. Если вы хотите разместить плеер на своей веб-странице с совершенно новым дизайном, то вам может понравиться ToneDen,

ToneDen – это библиотека библиотеки JavaScript для настройки аудиоплеера SoundCloud. Плеер отзывчивый, настраиваемый и расширяемый. Вы можете изменить скин, включить событие клавиатуры или выбрать отображение плеера только с одной дорожкой или с полным списком воспроизведения. В этом посте я расскажу вам об основной установке и оптимизации. Давайте начнем!

Рекомендуемое чтение: как создать стильный веб-аудиоплеер

1. Установка плеера
   Чтобы получить индивидуальный проигрыватель SoundCloud, вам не понадобится встроенный скрипт с сайта SoundCloud. Все, что вам нужно сделать, это просто определить элемент с уникальным идентификатором, а затем добавить необходимый скрипт.

Например, я хочу добавить одного из моих любимых пользователей из SoundCloud, Регина Спектор, на мой сайт. Первое, что я собираюсь сделать, это создать div с уникальным идентификатором, скажем, player, вот так.

Затем я добавляю следующий обязательный javascript перед закрывающим тегом body:

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

Во второй функции вы должны ссылаться на все ресурсы. Чтобы отобразить игрока, дайте дому тот же идентификатор, который мы определили ранее. И чтобы вызвать источник звука, мне просто нужно добавить URL с URL-адресом пользователя, который я хочу. Если вам нужны только выбранные звуковые дорожки, включите звуковые ссылки следующим образом:

URLs: [
‘https://soundcloud.com/reginaspektor/samson’,
‘https://soundcloud.com/reginaspektor/us’,
‘https://soundcloud.com/reginaspektor/alltherowboats’,
]

Это оно! Теперь у меня есть красивый проигрыватель SoundCloud:
2. Настройка игрока
Как уже упоминалось, вы можете настроить плеер ToneDen, если вам не нравится опция по умолчанию. Чтобы настроить его, просто включите соответствующий API во вторую функцию. Направляйтесь к API документация страница для более подробной информации.

Следующий фрагмент представляет собой демонстрацию использования простого API-интерфейса, например скина, для изменения цвета проигрывателя, единого для изменения пользовательского интерфейса, который выглядит минималистичным, и visualizerType для отображения другого типа визуализации.

ToneDenReady = window.ToneDenReady || [];
ToneDenReady.push (function () {
   // Здесь происходит все действие:
   ToneDen.player.create ({
      dom: ‘#player’,
      URLs: [
‘https://soundcloud.com/reginaspektor/samson’,
‘https://soundcloud.com/reginaspektor/us’,
‘https://soundcloud.com/reginaspektor/alltherowboats’,
],
      холост: правда,
      кожа: «темная»,
      visualizerType: ‘bars’
   });
});

Наш игрок теперь должен выглядеть так:
Если вы хотите, чтобы на странице было несколько игроков, легко создайте еще один ToneDen.player.create примерно так:

ToneDenReady.push (function () {
        ToneDen.player.create ({
            dom: ‘# player1’,
            URLs: [
‘https://soundcloud.com/giraffage’
]
});
        ToneDen.player.create ({
            dom: ‘# player2’,
            URLs: [
‘https://soundcloud.com/teendaze’
]
});
        ToneDen.player.create ({
            dom: ‘# player3’,
            URLs: [
‘https://soundcloud.com/beat-culture’
]
});
    });

Последняя мысль
С помощью всего лишь некоторого дополнительного кода, теперь вы можете создать свою собственную версию проигрывателя SoundCloud. В этой библиотеке мне больше всего нравится ее минималистичный дизайн и простота настройки. Вы также можете интегрировать этот плеер в свой блог WordPress с помощью небольшого учебника в нижней части ToneDen. страница, Радоваться, веселиться!