SoundCloud 流暂停按钮不起作用

Question

这是我的 CodePen：https://codepen.io/tremolocreative/pen/zZJjYN

来源如下。我似乎无法让暂停按钮工作。它所做的只是在现有的基础上重新启动一个重复的流。

我一直在挠头试图让它工作，任何帮助将不胜感激。

HTML

<script src="https://connect.soundcloud.com/sdk-2.0.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="player">
<button href="#" id="stream"></button>
</div>

CSS

button {
  background: url('//cdn.shopify.com/s/files/1/1055/5530/t/8/assets/play-pause-sprite.svg?2157621096199230646');
  background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  border: 0;
  outline: 0;
  display: block;
}

button.pause-sprite {
  background-position: top right;
}

JS

var client_id = '278594df9a311b2a1a56251b3a2b0fbe';
var track_id = '293605256';
var is_playing = false;
var player;

SC.initialize({
  client_id: client_id
});

$(document).ready(function() {
  $('#stream').on('click', function() {
    $(this).toggleClass('pause-sprite');
    SC.stream('/tracks/' + track_id, function(sound) {
      player = sound;

      if (is_playing === true) {
        player.pause();
        is_playing = false;
        console.log(is_playing);
      } else if (is_playing === false){
        player.play();
        is_playing = true;
        console.log(is_playing);
      }

    });
  });
});

Answer 1

我已经发布了此代码的 codepen 的链接（在此处调整以显示您的 bg 图标）切换图标在 fiddle 中不起作用（但我不能花更多时间在上面，我我在约 12 小时内度假）。

暂停有效！

/*jquery is the same - answer was too long, see [fiddle][2]*/

/* LAYOUT *
-----------------------------------------------*/

.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after {
  clear: both;
}

.cf {
  *zoom: 1;
}

* {
  box-sizing: border-box;
}

@small: ~"screen and (min-width: 20em)";
@medium: ~"screen and (min-width: 38em)";
@large: ~"screen and (min-width: 48em)";
@extra-large: ~"screen and (min-width: 58em)";
@max: ~"screen and (min-width: 68em)";

/* COLORS *
-----------------------------------------------*/

@white: #f8f8f8;
@red: #dd4444;
@red-dark: #bf3d3f;
@red-darker: #9c3538;
@black: #1f1f1f;
@grey: #4d4d4d;
body {
  margin: 0;
  background-color: @grey;
  color: white;
  text-align: center;
  .display;
  @media @medium {
    font-size: 112.5%;
  }
}

.wrapper {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

p.small {
  font-size: 0.8em;
}

a {
  color: @red-darker;
  &:hover {
    color: @red-dark
  }
}

a.sc-player,
.button {
  display: inline-block;
  background-image: url('//cdn.shopify.com/s/files/1/1055/5530/t/8/assets/play-pause-sprite.svg?2157621096199230646');
  //background: rgba(19, 19, 19, 0.14);
  border-radius: 4px;
  padding: 0.2em 0.2em;
  text-align: center;
  text-decoration: none;
  color: red;
  font-size: 1.5em;
  .transition;
  &:hover {
    //background: @red-darker;
    background-image: url('//cdn.shopify.com/s/files/1/1055/5530/t/8/assets/play-pause-sprite.svg?2157621096199230646');
    color: red;
  }
}

.main {
  margin-bottom: 4em;
}

.transition {
  transition: all 0.3s ease-out;
}


/* FONTS *
-----------------------------------------------*/

@import url(http://fonts.googleapis.com/css?family=Sacramento|Montserrat);
.display {
  font-family: 'Montserrat', sans-serif;
}

h1 {
  margin-top: 50px;
  .display;
  text-transform: uppercase;
  font-size: 2em;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  position: relative;
  @media @small {
    font-size: 2.5em;
  }
  @media @medium {
    font-size: 4.5em;
    margin-top: 100px;
  }
  @media @max {
    font-size: 6em;
  }
}


/* SOUNDCLOUD PLAYER *
-----------------------------------------------*/

.sc-player {
  position: relative;
  margin-bottom: 2em;
  .cf;
  a {
    text-decoration: none;
    color: #fff;
  }
  ol,
  li {
    margin: 0;
    padding: 0;
    list-style-position: inside;
  }
}


/* Artworks */

.sc-player .sc-artwork-list {
  display: none;
  float: left;
  width: 40%;
  margin-bottom: 3%;
  background-color: transparent;
  list-style-type: none;
  position: relative;
  height: 100%;
  li {
    list-style-type: none;
    display: none;
  }
  li.active {
    list-style-type: none;
    display: block;
  }
}

.sc-player .sc-artwork-list li img,
.sc-player .sc-artwork-list li div {
  list-style-type: none;
  width: 100%;
  height: auto;
}


/* controls */

.sc-player .sc-controls {
  display: block;
}

.sc-player .sc-controls a {
  text-indent: -9999px;
  content: '';
  display: block;
  background: @red-dark;
  background-image: url('//cdn.shopify.com/s/files/1/1055/5530/t/8/assets/play-pause-sprite.svg?2157621096199230646');
  background-size: cover;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  margin: 0 auto;
  position: relative;
  .transition;
  @media @medium {
    width: 110px;
    height: 110px;
  }
  &:hover {
    background: @red-darker;
    background-image: url('//cdn.shopify.com/s/files/1/1055/5530/t/8/assets/play-pause-sprite.svg?2157621096199230646');
  }
  &:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 50%;
    margin-left: -50px;
    z-index: 1;
    //background: url('http://s3-us-west-2.amazonaws.com/s.cdpn.io/35376/play-pause.png');
    background-image: url('//cdn.shopify.com/s/files/1/1055/5530/t/8/assets/play-pause-sprite.svg?2157621096199230646');
    background-position: top right;
    background-size: 100px auto;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    @media @medium {
      width: 90px;
      height: 90px;
      margin-top: -90px;
      margin-left: -90px;
      background-size: 180px auto;
    }
  }
}

.sc-player .sc-controls a.sc-pause:after {
  background-position: bottom;
}

.sc-scrubber .sc-time-indicators {
  background: @red-darker;
  background: rgba(19, 19, 19, 0.22);
  color: #fff;
  border-radius: 4px;
  padding: 7px;
  text-align: right;
}

.sc-player .sc-controls a.sc-pause {
  display: none;
}

.sc-player.playing .sc-controls a.sc-play {
  display: none;
}

.sc-player.playing .sc-controls a.sc-pause {
  display: block;
}


/* scrubber */

.sc-scrubber {
  position: relative;
  float: right;
  width: 100%;
  margin: 0.5em 0;
  border-radius: 4px;
  @media @medium {
    //margin-top: 20px;
  }
  .sc-time-span {
    height: 50px;
    position: relative;
  }
  .sc-buffer,
  .sc-played {
    height: 50px;
    position: absolute;
    top: 0;
  }
  .sc-time-indicators {
    position: absolute;
    right: 0;
    top: -48px;
  }
  .sc-time-span {
    //background-color: #666;
    border-radius: 4px;
    overflow: hidden;
  }
  .sc-volume-slider {
    background-color: @red-dark;
    background-color: rgba(19, 19, 19, 0.12);
    border-radius: 2px;
  }
  .sc-volume-slider .sc-volume-status {
    background-color: @red-darker;
    background-color: rgba(19, 19, 19, 0.22);
    border-right: 1px solid @red-darker;
    border-right: 1px solid rgba(19, 19, 19, 0.22);
    //border-right: 1px solid white;
  }
  .sc-waveform-container {
    z-index: 800;
    width: 50%;
    position: absolute;
  }
  .sc-time-span img {
    height: 50px;
    width: 50%;
    border-radius: 4px;
  }
  .sc-buffer {
    background: @red-dark;
    background: rgba(19, 19, 19, 0.12);
    z-index: 1;
    position: absolute;
  }
  .sc-played {
    background: @red-darker;
    background: rgba(19, 19, 19, 0.22);
    z-index: 799;
  }
}


/* volume control */

.sc-volume-slider {
  top: -35px;
  left: 0px;
  position: absolute;
  width: 75px;
  height: 20px;
  background-color: white;
  .sc-volume-status {
    position: absolute;
    width: 0%;
    height: 10px;
    top: 0;
    left: 0;
  }
}


/* tracks */


/* Track listings*/

.sc-player ol.sc-trackslist {
  position: relative;
  width: 50%;
  overflow: auto;
  li {
    width: 50%;
    cursor: pointer;
    margin-bottom: 0.5em;
    padding: 4%;
    background: @red-dark;
    background: rgba(19, 19, 19, 0.12);
    color: white;
    border-radius: 4px;
    transition: background 0.3s ease-in;
    text-align: left;
    @media @medium {
      padding: 2%;
    }
    &:last-child {
      margin-bottom: 0;
    }
    a {
      font-size: 1.125em;
      @media @small {}
      @media @medium {
        font-size: 2em;
      }
    }
    &:hover {
      background: @red-darker;
      background: rgba(19, 19, 19, 0.22);
    }
    &.active {
      background: @red-darker;
      background: rgba(19, 19, 19, 0.32);
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      a {
        color: #fff;
      }
    }
  }
}

.sc-track-duration {
  float: right;
  margin-top: 0.25em;
  @media @medium {
    margin-top: 0.5em;
  }
}


/* Track info*/

.sc-player .sc-info {
  position: relative;
  margin-bottom: 2em;
  padding: 1% 3%;
  @media @medium {
    margin-top: 1em;
    margin-bottom: 3em;
  }
  h3 {
    font-size: 2em;
    margin-bottom: 0.5em;
  }
  h4 {
    display: none;
  }
  .sc-info a {
    color: #fff;
  }
}

p {
  max-width: 19em;
  max-width: 19rem;
  margin: 0 auto 1em;
  line-height: 1.5;
  text-align: left;
}

.sc-player .sc-info-toggle,
.sc-player .sc-info-close {
  display: none;
}


/* utilities */

.sc-player .hidden {
  //display: none;
}

.sc-player-engine-container {
  width: 1px;
  height: 1px;
  position: fixed;
  top: 2px;
  left: 2px;
}

.sc-player .sc-info-toggle {
  background: #22B573;
  color: #fff;
  border-radius: 1px;
  padding: 4px;
}

.sc-player .sc-info-toggle:hover {
  background: #333;
  color: #fff;
}

.sc-player .sc-info-close {
  background: #22B573;
  border-radius: 4px;
  padding: 2px 4px;
  font-weight: bold;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body>
  <header class="site-header wrapper">
    <h1>Soundcloud Player</h1>
  </header>
  <section role="main" class="main wrapper">
    <a href="https://soundcloud.com/ritchrd/fly-feat-ritchrd" class="sc-player">Listen</a>

  </section>
</body>