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

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

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

1. Установка плеера

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

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

<div id="player"></div>

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

<script>
   (function() {
      var script = document.createElement('script');
 
      script.type = 'text/jаvascript';
      script.async = true;
      script.src = 'http://sd.toneden.io/production/toneden.loader.js'
 
      var entry = document.getElementsByTagName('script')[0];
      entry.parentNode.insertBefore(script, entry);
   }());
 
   ToneDenReady = window.ToneDenReady || [];
   ToneDenReady.push(function() {
      // Здесь происходит всё действие:
      ToneDen.player.create({
         dom: '#player',
         urls: [
            'https://soundcloud.com/reginaspektor'
         ]
      });
   });
</script>

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

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

urls: [
   'https://soundcloud.com/reginaspektor/samson',
   'https://soundcloud.com/reginaspektor/us',
   'https://soundcloud.com/reginaspektor/alltherowboats',
]

Теперь у меня есть красивый плеер SoundCloud:


2. Кастомизация плеера

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

Следующий фрагмент представляет собой демонстрацию использования простого API-интерфейса, например skin, для изменения цвета проигрывателя, single для изменения пользовательского интерфейса, который выглядит минималистичным для отображения другого типа визуализации (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',
      ],
      single: true,
      skin: 'dark',
      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. В этой библиотеке мне больше всего нравится минималистичный дизайн и простота настройки. Вы также можете интегрировать этот проигрыватель на свой сайт с помощью небольшого руководства на данной странице.