I'm trying to synchronize start of the views slideshow with the start of an HTML5 audio object. In order to acomplish this, I created a link with ".playback" css class like this:

<a class="playback" href="#"> PLAY </a>
<audio controls="" loop="" id="musicPlayer" tabindex="0">
<source type="audio/mp3" src="http://www.mysite.com/sites/default/files/file.mp3"></source>
<source type="audio/ogg" src="http://www.mysite.com/sites/default/files/file.ogg"></source>
</audio>

I created a js file to synchro the two events that contains this code:

(function($) {
    Drupal.behaviors.myBehavior = {
        attach: function (context, settings) {
            $(".playback").click(function(e) {
                e.preventDefault();
                var uniqueID = 'slideshow_privat-block';
                // This next line will get the audio element
                // that is adjacent to the link that was clicked.
                var song = $(this).next('audio').get(0);
                if (song.paused) {
                    song.play();
                    Drupal.viewsSlideshowCycle.play({ "action": 'play', "slideshowID": uniqueID });
                }
                else {
                    song.pause();
                    Drupal.viewsSlideshowCycle.pause({ "action": 'pause', "slideshowID": uniqueID });
                }
            });

        }
    };
})(jQuery);

I had to manually define "var uniqueID" because I can't find a method or something to get the "var uniqueID" dinamically. Is there some method to acomplish this??

Thanks in advance!

Comments

eidoscom’s picture

Issue summary: View changes

little code mistake change

NickDickinsonWilde’s picture

Status: Active » Closed (works as designed)

You can access them in the Drupal.settings.viewsSlideshowCycle object. specifically that object will be filled with individual slideshow (in most cases only 1), keyed by the HTML id value for the slideshow. Inside of that under vss_id is the id you want.
(Not sure about the alphas/prior to 7.x-3.1)