Question

我的页面带有Sound Cloud小部件。假设我的网络上此播放器外面有两个按钮。第一个曲目的第一个按钮，第二个曲目的第二个按钮。

目的是在Sound Cloud小部件上加载并播放曲目。该代码部分有效，唯一的缺陷是刷新页面时，我需要单击两次音轨才能开始播放。您是否在代码中看到该问题，或者可以建议如何从外部按钮触发轨道？非常感谢

链接到代码： https://codepen.io/laimison/pen/oaXzMQ

粘贴在此处的相同代码：

<!-- SOUND CLOUD IFRAME -->
<!-- one initial instance of the widget, reloaded via the API -->
<a name="wgt"></a> <!-- widget scroll target for mobiles -->
<iframe id="sc-widget"
        src="https://w.soundcloud.com/player/?url=https://soundcloud.com/universalflyer/sets/universal-flyer&amp;auto_play=false&hide_related=true&show_comments=false&show_user=false&show_artwork=true&show_reposts=false&buying=false&download=false&liking=true"
        width="100%" height="166" scrolling="no" frameborder="no"></iframe>
<p />

<!-- TRACK 1 -->
<a href="#wgt"
   onclick="return M2SC.loadSCWidget(this);"
   data-track="clouds-above"
   data-band="universalflyer">

   <span>Play Clouds Above</span>
</a>        
<p />

<!-- TRACK 2 -->
<a href="#wgt"
   onclick="return M2SC.loadSCWidget(this);"
   data-track="mutual"
   data-band="universalflyer">

   <span>Play Mutual</span>
</a>        
<p />

<!-- Load Vendor JS -->
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Custom JS -->
<script>
// Interactions with the SoundCloud HTML5 widget.
// Depends on https://w.soundcloud.com/player/api.js ('SC')
// Depends on jQuery ('$')
// Depends on Font Awesome style classes ('fa-')
// Depends on local style classes ('sc-')
// Load after the widget and SoundCloud API
// M2 April, 2015

var M2SC = (function ($, SC) {
  'use strict';

  var my = {
    scWidget: SC.Widget($('#sc-widget').get(0)),
    scLoadedTrackName: null,
    scLoadedTrackIcon: null,
    scIsMobile: navigator.userAgent.match(/Mobi/) ? true : false, // mobile users must click widget directly

    // Caches the jQuery reference to the loaded track's play/pause button
    scSetLoadedTrackIcon: function (track) {
       my.scLoadedTrackIcon = $('#play-' + track);
    },

    /*
    // Events maintain state between track links and the widget
    scBindWidgetEvents: function() {
      // After playback starts, show pause icon
      my.scWidget.bind(SC.Widget.Events.PLAY, function () {
        my.scLoadedTrackIcon.removeClass('sc-play fa-play').addClass('sc-pause fa-pause');
        $('body').removeClass('busy');
      });

      // After playback pauses, show play icon
      my.scWidget.bind(SC.Widget.Events.PAUSE, function () {
        my.scLoadedTrackIcon.removeClass('sc-pause fa-pause').addClass('sc-play fa-play');
        $('body').removeClass('busy');
      });

      // After playback finishes, show play icon
      my.scWidget.bind(SC.Widget.Events.FINISH, function () {
        my.scLoadedTrackIcon.removeClass('sc-pause fa-pause').addClass('sc-play fa-play');
      });
    },
    */

    // Initialization function called from the loading page, pass in the track name
    scInitialize: function(track) {
      my.scLoadedTrackName = track;
      my.scSetLoadedTrackIcon(track);
      my.scBindWidgetEvents();
    },

    // Compose and load the track's URL
    // Will look something like 'https://soundcloud.com/deepgraysea/chanty'
    loadSCWidget: function (element) {
      var scPrefix = 'https://soundcloud.com/',
          bandName = element.getAttribute('data-band'),
          trackName = element.getAttribute('data-track'),
          url = scPrefix + bandName + '/' + trackName;

      // If this sound is already loaded into the player, toggle playback.
      // Mobiles, drop through & refocus on widget via return statement.
      if (M2SC.scLoadedTrackName === trackName) {
        if (M2SC.scIsMobile === false) {
          M2SC.scWidget.toggle();
        }

      // Loading a new sound, automatically play it, show a progress cursor, reinitialize
      } else {

        // Look busy, stop looking like we're playing any previous track
        $('body').addClass('busy');
        my.scLoadedTrackIcon.removeClass('sc-pause fa-pause').addClass('sc-play fa-play');

        // Load the widget from SoundCloud. Object initializers vs URL params a bit flaky, so duplicated.
        my.scWidget.load(url, {
          show_artwork: true,
          auto_play: M2SC.scIsMobile ? false : true, // no auto-play on mobiles choose false : true
          download: false,
          sharing: false,
          show_comments: false,
          show_playcount: true,
          show_user: true,
          start_track: 0,
          hide_related: true,
          buying: false,
          visual: false
        });

        my.scLoadedTrackName = trackName;

        // Reset the event handling only after the widget is reloaded
        my.scWidget.bind(SC.Widget.Events.READY, function () {
          my.scBindWidgetEvents();
          $('body').removeClass('busy');
          my.scSetLoadedTrackIcon(M2SC.scLoadedTrackName);
        });
      } // end loading new

      return my.scIsMobile; // allow navigation to the widget for mobiles, who must click manually
    }
  };
  return my;
}($, SC));
</script>

<!-- Custom JS -->
<script>
  // Initialize with the name of the widget's initially loaded track
  M2SC.scInitialize('moan');
  if (M2SC.scIsMobile === true) {
    $('#scNonMobileExplain').css('display', 'none');
    $('#scMobileExplain').css('display', 'inline');
  }
</script>

使用单独的按钮在Soundcloud小部件上加载和播放曲目

0 个答案: