Текущее время и продолжительность с Soundcloud в JavaScript
Ну, я пытаюсь поставить справа от бара справа вверху время воспроизведения звука в потоковом режиме. Я посмотрел везде, есть много способов для аудио ogg в mp3 и т. Д., Но ничего простого, чтобы показать время его Soundcloud. Идея?
вот мой код:
<head>
<!-- SoundCloud-->
<script type="text/javascript" src="http://w.soundcloud.com/player/api.js"></script>
<script src="//connect.soundcloud.com/sdk-2.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div id="slider-volume"></div>
<script src='//w.soundcloud.com/player/api.js'></script>
<div class="player">
<span class='info'></span>
<div class="waveform"></div>
<div class="position"></div>
<div id="playSound"></div>
<div id="stopSound"></div>
</div>
<iframe class="sc-widget" src="//w.soundcloud.com/player/?url=//soundcloud.com/cob/catchme&color=FF9900&show_bpm=true&hide_related=true&show_comments=true&show_user=true&show_reposts=true"></iframe>
</body>
<style type="text/css">
body {
overflow: hidden;
background: transparent;
}
#slider-volume {
position: absolute;
top: 29px;
left: 75px;
height: 5px;
background: rgba(255, 86, 0, 1);
border-color: transparent;
border-radius: 10px;
width: 190px;
border: none;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
cursor: pointer;
}
#slider-volume .ui-slider-range-min {
position: absolute;
height: 5px;
border-radius: 10px;
border-width: 0px;
background: rgba(255, 153, 0, 1);
border: none;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
cursor: pointer;
}
#slider-volume .ui-slider-handle {
opacity: 1;
filter: alpha(opacity=1);
border-radius: 10px;
position: absolute;
width: 10px;
height: 10px;
top: -2.5px;
outline: none;
border: 1px solid rgba(251, 27, 10, 1);
background: rgba(0, 0, 0, 1);
cursor: pointer;
}
#slider-volume .ui-slider-handle:hover,
#slider-volume:hover {
cursor: pointer;
-webkit-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 1);
-moz-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 1);
box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 1);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#playSound {
z-index: 5;
position: fixed;
background-color: rgba(251, 27, 10, 1);
border: 1px solid rgba(251, 27, 10, 1);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
top: 7px;
left: 37px;
width: 25px;
height: 25px;
background-image: url(${resourcesFolderName}/play_hover_c.png);
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 50% 50%;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
cursor: pointer;
}
#stopSound {
z-index: 5;
position: fixed;
background-color: rgba(251, 27, 10, 1);
border: 1px solid rgba(251, 27, 10, 1);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
top: 7px;
left: 7px;
width: 25px;
height: 25px;
background-image: url(${resourcesFolderName}/pause_hover_c.png);
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 50% 50%;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
cursor: pointer;
}
#playSound:hover {
position: fixed;
background-color: white;
border: 4px solid white inset;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
top: 7px;
left: 37px;
width: 25px;
height: 25px;
background-image: url(${resourcesFolderName}/play_c.png);
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 50% 50%;
border-color: transparent;
-webkit-box-shadow: 0px 0px 5px 5px rgba(250, 250, 250, 0.2);
-moz-box-shadow: 0px 0px 5px 5px rgba(250, 250, 250, 0.2);
box-shadow: 0px 0px 5px 5px rgba(250, 250, 250, 0.2);
}
#stopSound:hover {
position: fixed;
background-color: white;
border: 4px solid white inset;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
top: 7px;
left: 7px;
width: 25px;
height: 25px;
background-image: url(${resourcesFolderName}/pause_c.png);
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 50% 50%;
border-color: transparent;
-webkit-box-shadow: 0px 0px 5px 5px rgba(250, 250, 250, 0.2);
-moz-box-shadow: 0px 0px 5px 5px rgba(250, 250, 250, 0.2);
box-shadow: 0px 0px 5px 5px rgba(250, 250, 250, 0.2);
}
iframe {
position: fixed;
top: 50%;
left: 10%;
width: 80%;
height: 166px;
border: 2px solid rgba(255, 86, 0, 1);
border-radius: 5px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.9);
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.9);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.player {
cursor: pointer;
position: fixed;
top: 4px;
left: 75px;
/*4 et 75*/
margin: auto;
height: 20px;
width: 190px;
font-family: 'Yantramanav', sans-serif;
background-color: rgba(251, 27, 10, 0.9);
transition: background-image 1s linear;
-webkit-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.waveform {
z-index: 3;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255, 86, 10, 0.1);
transition: background-image 1s linear;
-webkit-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.position {
position: absolute;
height: 100%;
width: 0px;
height: 20px;
background-color: rgba(251, 153, 0, 0.5);
-webkit-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 5px;
transition: width .1s linear;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.info {
user-select: none;
z-index: 1;
position: absolute;
width: 80%;
left: 70px;
margin: 0.3em -5.5em;
font-size: 0.8em;
letter-spacing: .03em;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
color: white;
}
.player .waveform:hover {
cursor: pointer;
-webkit-box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, 1);
-moz-box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, 1);
box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, 1);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
</style>
<script type="text/javascript">
SC.initialize({
client_id: "70919eb43a47839a9c5fe09ae9be450f",
redirect_uri: "http://127.0.0.1:64184/preview/callback",
});
var sounds = null;
SC.stream("/tracks/225335752", {
autoPlay: false,
show_comments: true,
show_user: true,
}, function(sound) {
var widget1 = SC.Widget($('iframe.sc-widget')[0]);
$("#slider-volume").slider("option", "step", 0.01);
$("#slider-volume").slider("option", "max", 1);
$("#slider-volume").slider("option", "value", sound.getVolume());
$('#playSound').click(function(e) {
e.preventDefault();
widget1.toggle();
e.stopPropagation();
});
$('#stopSound').click(function(e) {
e.preventDefault();
widget1.pause();
e.stopPropagation();
widget1.seekTo(0);
});
$("#slider-volume").on("slidechange", function(event, ui) {
widget1.setVolume(ui.value);
});
});
$(function() {
$("#slider-volume").slider();
});
$("#slider-volume").slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
value: 100,
slide: function(event, ui) {
$("#amount").val(ui.value);
}
});
$(document).ready(function() {
var player = SC.Widget($('iframe.sc-widget')[0]);
var pOffset = $('.player').offset();
var pWidth = $('.player').width();
var scrub;
player.bind(SC.Widget.Events.READY, function() {
setInfo();
player.pause();
}); //Set info on load
player.bind(SC.Widget.Events.PLAY_PROGRESS, function(e) {
if (e.relativePosition < 0.003) {
setInfo();
}
//Event listener when track is playing
$('.position').css('width', (e.relativePosition * 100) + "%");
});
$('.player').mousemove(function(e) { //Get position of mouse for scrubbing
scrub = (e.pageX - pOffset.left);
});
$(document).on('keydown', function(e) {
switch (e.keyCode) {
case 32:
player.toggle();
break;
case 39:
player.next();
break;
case 37:
player.prev();
break;
}
});
$('.player').click(function() { //Use the position to seek when clicked
$('.position').css('width', scrub + "px");
var seek = player.duration * (scrub / pWidth);
//Seeking to the start would be a previous?
if (seek < player.duration * 0.05) {
player.prev();
} else if (seek > player.duration * 0.99) {
player.next();
} else {
player.seekTo(seek);
}
});
function setInfo() {
player.getCurrentSound(function(song) {
console.log(song);
$('.position').css('background-color');
$('.player').css('background-color');
var info = song.title;
$('.info').html(info);
player.current = song;
});
player.getDuration(function(value) {
player.duration = value;
});
player.isPaused(function(bool) {
player.getPaused = bool;
});
}
});
</script>Я не очень хороший код, это не моя профессия, но я каждый день изучаю новые функции.
Что бы я сделал, это:
вызвать кнопку воспроизведения звукового облака iframe: хорошо сделано
прекрати: хорошо сделано
громкость работает с текущим звуком: хорошо сделано
но отобразить currentTime и продолжительность, и это работает с текущим воспроизведением:???
Я попробовал это на примере:
но мне бы хотелось, чтобы время отображалось в реальном времени.
Любая информация поможет мне
Лучший
2 ответа
Следующий код установит содержимое элемента html в "duration" каждую секунду:
//repeat every interval (1s)
setInterval(function(){
widget.getDuration(function(duration){
//Set inner html of element with id duration to duration
$('#duration').html(duration);
});
}
,1000); //Interval in ms
Отлично подходит для ответа HARTGER.
Я пытался найти другое решение. Ваше решение лучше, но теперь я помещаю, что я понимаю..., автоматический currentTime и продолжительность в HTML, я не знаю, хорошо ли я сделал???
Теперь я пытаюсь разделить число прочитанных ( play_count)... Я ищу простой способ его интеграции.
Но в любом случае спасибо за ответ.
Лучший
-cob-
<head>
<!-- SoundCloud-->
<script type="text/javascript" src="http://w.soundcloud.com/player/api.js"></script>
<script src="//connect.soundcloud.com/sdk-2.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div id="slider-volume">
<input type="text" id="amount" readonly>
</div>
<script src='//w.soundcloud.com/player/api.js'></script>
<div class="player">
<span class='info'></span>
<div class="waveform"></div>
<div class="position"></div>
<div id="playSound"></div>
<div id="stopSound"></div>
<div class="timer" id="playerTime">00:00</div>
<div class="duration">- 04:15</div>
</div>
<iframe class="sc-widget" scrolling="no" frameborder="no" src="//w.soundcloud.com/player/?url=//soundcloud.com/cob/catchme&color=FF9900&show_bpm=true&hide_related=true&show_comments=true&show_user=true&show_reposts=true"></iframe>
</body>
<style type="text/css">
body {
overflow: hidden;
background: black;
}
#slider-volume {
z-index: 4;
position: absolute;
top: 29px;
left: 75px;
height: 5px;
background: rgba(255, 86, 0, 1);
border-color: transparent;
border-radius: 10px;
width: 190px;
border: none;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
cursor: default;
}
#slider-volume .ui-slider-range-min {
z-index: 6;
position: absolute;
height: 5px;
border-radius: 10px;
border-width: 0px;
background: rgba(255, 153, 0, 1);
border: none;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
cursor: default;
}
#slider-volume .ui-slider-handle {
z-index: 7;
opacity: 1;
filter: alpha(opacity=1);
border-radius: 10px;
position: absolute;
width: 10px;
height: 10px;
top: -2.5px;
outline: none;
border: 1px solid rgba(255, 255, 255, 1);
background: rgba(251, 27, 10, 1);
cursor: default;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#slider-volume .ui-slider-handle:hover,
#slider-volume:hover {
cursor: default;
-webkit-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 1);
-moz-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 1);
box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 1);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#amount {
top: 10px;
left: -20px;
position: absolute;
display: block;
width: 45px;
height: 25px;
padding: 5px;
background: url(https://dl.dropbox.com/s/72fq2mbo90d2if4/tips-volume.png) no-repeat scroll 0% 50%;
background-size: 110%;
border: 0;
color: white;
font-family: 'Yantramanav', sans-serif;
font-weight: 100;
font-size: 0.7em;
text-align: right;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
user-select: none;
outline: none;
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#amount:hover {
opacity: 1;
filter: alpha(opacity=1);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#playSound {
z-index: 5;
position: fixed;
background-color: rgba(251, 27, 10, 1);
border: 1px solid rgba(251, 27, 10, 1);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
top: 7px;
left: 37px;
width: 25px;
height: 25px;
background-image: url(${resourcesFolderName}/play_hover_c.png);
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 50% 50%;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
cursor: default;
}
#stopSound {
z-index: 5;
position: fixed;
background-color: rgba(251, 27, 10, 1);
border: 1px solid rgba(251, 27, 10, 1);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
top: 7px;
left: 7px;
width: 25px;
height: 25px;
background-image: url(${resourcesFolderName}/pause_hover_c.png);
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 50% 50%;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
cursor: default;
}
#playSound:hover {
position: fixed;
background-color: white;
border: 4px solid white inset;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
top: 7px;
left: 37px;
width: 25px;
height: 25px;
background-image: url(${resourcesFolderName}/play_c.png);
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 50% 50%;
border-color: transparent;
-webkit-box-shadow: 0px 0px 5px 5px rgba(250, 250, 250, 0.2);
-moz-box-shadow: 0px 0px 5px 5px rgba(250, 250, 250, 0.2);
box-shadow: 0px 0px 5px 5px rgba(250, 250, 250, 0.2);
}
#stopSound:hover {
position: fixed;
background-color: white;
border: 4px solid white inset;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
top: 7px;
left: 7px;
width: 25px;
height: 25px;
background-image: url(${resourcesFolderName}/pause_c.png);
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 50% 50%;
border-color: transparent;
-webkit-box-shadow: 0px 0px 5px 5px rgba(250, 250, 250, 0.2);
-moz-box-shadow: 0px 0px 5px 5px rgba(250, 250, 250, 0.2);
box-shadow: 0px 0px 5px 5px rgba(250, 250, 250, 0.2);
}
iframe {
position: fixed;
top: 50%;
left: 10%;
width: 80%;
height: 130px;
border: 2px solid rgba(255, 86, 0, 1);
border-radius: 5px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.9);
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.9);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.player {
cursor: default;
position: fixed;
top: 4px;
left: 75px;
/*4 et 75*/
margin: auto;
height: 20px;
width: 190px;
background-color: rgba(251, 27, 10, 0.9);
transition: background-image 1s linear;
-webkit-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.waveform {
z-index: 3;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255, 86, 10, 0.1);
transition: background-image 1s linear;
-webkit-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.position {
position: absolute;
height: 100%;
width: 0px;
height: 20px;
background-color: rgba(251, 153, 0, 0.5);
-webkit-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 5px;
transition: width .1s linear;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.info {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 1;
position: absolute;
width: 80%;
left: 70px;
margin: 0.3em -5.5em;
font-size: 0.8em;
letter-spacing: .03em;
font-family: 'Yantramanav', sans-serif;
font-weight: 100;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
color: white;
}
.player .waveform:hover {
cursor: pointer;
-webkit-box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, 1);
-moz-box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, 1);
box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, 1);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.timer {
position: absolute;
}
#playerTime {
z-index: 1;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
user-select: none;
position: absolute;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: 'Yantramanav', sans-serif;
font-weight: 100;
font-size: 0.8em;
margin: 0px 0 0 0px;
top: 3px;
right: 45px;
color: white;
}
.duration {
z-index: 1;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
user-select: none;
font-family: 'Yantramanav', sans-serif;
font-weight: 100;
font-size: 0.8em;
position: absolute;
top: 3px;
right: 10px;
color: white;
}
</style>
<script type="text/javascript">
String.prototype.toHHMMSS = function() {
var sec_num = parseInt(this, 10);
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60) - 1;
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
var time = '' + minutes + ':' + seconds; // si heure hours+':'
return time;
}
SC.initialize({
client_id: "70919eb43a47839a9c5fe09ae9be450f",
redirect_uri: "http://127.0.0.1:64184/preview/callback",
});
var sounds = null;
SC.stream("/tracks/225335752", {
autoPlay: false,
show_comments: true,
show_user: true,
}, function(sound) {
var widget1 = SC.Widget($('iframe.sc-widget')[0]);
$("#slider-volume").slider("option", "step", 0.01);
$("#slider-volume").slider("option", "max", 1);
$("#slider-volume").slider("option", "value", sound.getVolume());
$('#playSound').click(function(e) {
e.preventDefault();
widget1.toggle();
e.stopPropagation();
});
$('#stopSound').click(function(e) {
e.preventDefault();
widget1.pause();
e.stopPropagation();
widget1.seekTo(0);
});
$("#slider-volume").on("slidechange", function(event, ui) {
widget1.setVolume(ui.value);
});
});
$(function() {
$("#slider-volume").slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
value: 100,
slide: function(event, ui) {
$("#amount").val((ui.value * 100).toFixed() + ' %');
},
create: function(event, ui) {
$(event.target).find('.ui-slider-handle').append(amount);
},
});
$("#amount").val($("#slider-volume").slider("value").toFixed() + ' %');
});
$(document).ready(function() {
var player = SC.Widget($('iframe.sc-widget')[0]);
var pOffset = $('.player').offset();
var pWidth = $('.player').width();
var scrub;
player.bind(SC.Widget.Events.READY, function() {
setInfo();
player.pause();
}); //Set info on load
player.bind(SC.Widget.Events.PLAY_PROGRESS, function(progress) {
var seconds = Math.ceil(progress.currentPosition / 1000);
var secondsF = String(seconds).toHHMMSS();
$('#playerTime').html(secondsF);
});
player.bind(SC.Widget.Events.PLAY_PROGRESS, function(e) {
if (e.relativePosition < 0.003) {
setInfo();
}
//Event listener when track is playing
$('.position').css('width', (e.relativePosition * 100) + "%");
});
$('.player').mousemove(function(e) { //Get position of mouse for scrubbing
scrub = (e.pageX - pOffset.left);
});
$(document).on('keydown', function(e) {
switch (e.keyCode) {
case 32:
player.toggle();
break;
case 39:
player.next();
break;
case 37:
player.prev();
break;
}
});
$('.player').click(function() { //Use the position to seek when clicked
$('.position').css('width', scrub + "px");
var seek = player.duration * (scrub / pWidth);
//Seeking to the start would be a previous?
if (seek < player.duration * 0.05) {
player.prev();
} else if (seek > player.duration * 0.99) {
player.next();
} else {
player.seekTo(seek);
}
});
function setInfo() {
player.getCurrentSound(function(song) {
console.log(song);
$('.position').css('background-color');
$('.player').css('background-color');
var info = song.title;
$('.info').html(info);
player.current = song;
});
player.getDuration(function(value) {
player.duration = value;
});
player.isPaused(function(bool) {
player.getPaused = bool;
});
}
});
</script>