在javascript中soundcloud的当前时间和持续时间

好吧，我试图把我的权利旁边右上角时间声音播放流。我到处寻找，有很多方法可用于mp3等音频ogg，但没有什么简单的方法来显示他的soundcloud时间。一个想法？在javascript中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&amp;color=FF9900&amp;show_bpm=true&amp;hide_related=true&amp;show_comments=true&amp;show_user=true&amp;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的SoundCloud的播放按钮：OK完成
停止它：好做
工程量与当前的声音： ok done
但显示当前时间和持续时间，并与当前回放一起工作：???

我试图用一个例子：

http://jsfiddle.net/Ldc2N/

但我想的时间被实时显示。

任何信息将帮助我

最好

来源

2015-11-10 cob

下面的代码将设置一个HTML元素“时间”每秒的内容：

  //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

来源

2015-11-18 16:02:16 Hartger

嗨，伟大的HARTGER答案... – cob

@cob如果我理解你的权利，你试图同步数据是存在于您的视图中的元素与您的JavaScript。要做到这一点，你必须观察javascript中值的变化并将其应用于视图。这被称为'数据绑定'。最简单的方法就是使用一个框架或库来为你做这件事。我建议你查看一下轻量级的数据绑定库（Rivet.JS也是这样，但我没有经验）。 – Hartger

伟大的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&amp;color=FF9900&amp;show_bpm=true&amp;hide_related=true&amp;show_comments=true&amp;show_user=true&amp;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>

来源

2015-11-20 09:34:47 cob

在javascript中soundcloud的当前时间和持续时间

回答

相关问题