Этот полностью редактируемый аудио-плеер на девственно чистом коде JS, предназначенный для прослушивания музыкальных треков, размещенных на всеми любимом SoundCloud - являет собой, кажется, вполне достойную попытку создания альтернативы дефолтному плейеру от SoundCloud... не правда ли? Система позволяет встроенным страницам использовать (как синхронно, так и асинхронно) очень небольшой скрипт загрузки, который затем загружает более крупные файлы SDK. В итоге, когда SDK будет уже полностью подгружен - загрузчик запускает все необходимые функции в глобальном массиве ToneDenReady, что позволяет реализовать доступ к функционалу SDK.
Неплохо, правда? Предоставленное разработчиком API предусматривает набор скинов, два типа визуализатора, выбор количества воспроизводимых треков, ну и кое-что еще. Если все это заинтересовало - не ленитесь взглянуть документацию разработчика, welcome по ссылке. К сожалению, как нередко бывает, коль есть доходы - есть и издержки... одной из них является, безусловно, отсутствие поддержки Mozilla Firefox, дискуссию на тему и объяснение данному печальному обстоятельству вы можете увидеть, скажем, по этой ссылке, на гитхабе.
А в остальном audio player весьма неплох. Не правда ли? Показанный на этой страничке плеер реализован, согласитесь, довольно компактно:
<!DOCTYPE html>
<html>
<head>
<title>Melodicpictures</title>
<link href="/css/foundation.min.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
</head>
<body>
<script src="/js/jquery.min.js"></script>
<div id="player-container">
<div id="player" class="large-6 small-12 small-centered large-centered columns">
</div>
</div>
<script>
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'toneden.loader.js'
var entry = document.getElementsByTagName('script')[0];
entry.parentNode.insertBefore(script, entry);
}());
ToneDenReady = window.ToneDenReady || [];
ToneDenReady.push(function() {
// This is where all the action happens:
ToneDen.player.create({
dom: '#player',
visualizerType: "bars" ,
urls: [
'https://soundcloud.com/melodicpictures'
]
});
});
</script>
</body>
</html>
