Question

我是新来的，希望我不要在错误的地方提问。好吧，我几乎不了解JQuery的任何内容，但我已经尝试了很多...我想在我的播放器上复制曲目，其控制栏只有一个。解释得更好;我希望曲目出现在网站的两个位置，通过点击一个就像点击另一个一样。使用控件（播放，下一个等）同时也可以同时使用。简而言之，音频标记将同时适用于两者。我组织了代码，使其变得非常简单，只有最重要的：在Jsfiddle

或者就在这里：

CSS：

 body {
  color: #FFFFFF;
  background-color: #212121;
  margin: 0;
  }
  .controls {
  position:fixed;
  bottom:0;
  height: 45px;
  width: 100%;
  }
  .seek-bar {
  position: fixed;
  bottom: 45px;
  width: 100%;
  height: 4px;
  }
  .seek-bar .progress-bar {
  background-color: #1CE8B3;
  width: 100%;
  height: 100%;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0;
  -moz-transform-origin: 0;
  -ms-transform-origin: 0;
  -o-transform-origin: 0;
  transform-origin: 0;
  -webkit-transition: transform 0.2s;
  -moz-transition: transform 0.2s;
  -ms-transition: transform 0.2s;
  -o-transition: transform 0.2s;
  transition: transform 0.2s;
  }
  .controls .buttons {
  width: 300px;height: 45px;
  left:0;right:0;
  margin: 0 auto;
  position: relative;
  }
  .controls .play{
  position: absolute;
  width: 50px;height: 50px;
  left:0;right:0;top:0;bottom:0;
  margin: auto;
  }
  .prev {
  position: absolute;
  left: 0;top:0;bottom:0;
  margin:auto;
  width: 45px;height: 45px;
  }
  .next {
  position: absolute;
  right: 0;top:0;bottom:0;margin:auto;
  width: 45px;height: 45px;
  }
  .tracks .track{padding: 10px;}
  .tracks .track .name{vertical-align: middle;}
  .track {background: #212121;}
  .track.active {background: #111111;}

HTML

<div class="controls">
    <div class="seek-bar"><div class="progress-bar"></div></div>
        <a class="prev">prev</a>
        <a class="play">play/pause</a>
        <a class="next">next</a>
</div>

<div class="tracks">        
    <div class="track active">
        <div class="name">música 1</div>
    </div>
    <div class="track">
        <div class="name">música 2</div>
    </div>
    <div class="track">
        <div class="name">música 3</div>
    </div>
    <div class="track">
        <div class="name">música 4</div>
    </div>
    <div class="track">
        <div class="name">música 5</div>
    </div>
    <audio class="music"><source src="http://audeficheux.com/projects/carousel/src/medias/0.mp3" type="audio/mpeg"> Your browser doesn't support video API</audio>
</div>

JQUERY

var Player = function ( $target )
{
    this.$ = {};
    this.$.body         = $target;
    this.$.prev             = this.$.body.find('.prev');
    this.$.next             = this.$.body.find('.next');
    this.$.play             = this.$.body.find('.play');
    this.$.seek_bar         = this.$.body.find('.seek-bar');
    this.$.progress_bar     = this.$.body.find('.progress-bar');
    this.$.tracks           = this.$.body.find('.tracks');
    this.$.music            = this.$.body.find('.music');
    this.$.track            = this.$.tracks.find('.track');

    this.count = this.$.track.length;
    this.init_events();
};

Player.prototype.index = 0;
Player.prototype.count = 0;
Player.prototype.progress_ratio = 0;

Player.prototype.init_events = function (){
    var that = this;

    this.$.next.on('click', function(){
        that.next();
        return false;
    });
    this.$.prev.on('click', function(){
        that.prev();
        return false;
    });

    this.changeMusic();

    this.$.play.on('click', function(){
        play = !play;
        that.changeMusic();
        return false;
    });

    /* when music ends */ 
    this.$.music.bind('ended', function(){
        that.next();
    });

    /**** seek-bar ****/
    window.setInterval(function () {
        this.progress_ratio = that.$.music[0].currentTime / that.$.music[0].duration;
        that.$.progress_bar.css({
          transform: "scaleX(" + progress_ratio + ")"
        });
    }, 50);
    /* change current music */ 
    this.$.seek_bar.on('click', function (e) {
            var x = e.clientX - that.$.seek_bar.offset().left,
            ratio = x / that.$.seek_bar.width(),
            time = ratio * that.$.music[0].duration;
        that.$.music[0].currentTime = time;
    });
};

Player.prototype.next = function()
{
    this.go_to( this.index + 1, this.index);
};
Player.prototype.prev = function()
{
    this.go_to( this.index - 1, this.index);
};

Player.prototype.go_to = function( index, currentIndex )
{   
    if (currentIndex != index) {

        index = index%this.count;
        if (index < 0)
            index = index + this.count;

        this.$.track[currentIndex].classList.remove('active');
        this.$.track[index].classList.add('active');
        /* change music source*/
        this.$.music[0].setAttribute('src', 'http://audeficheux.com/projects/carousel/src/medias/' + index + '.mp3');

        this.changeMusic();
        this.index = index;
    }
};

Player.prototype.changeMusic = function()
{   
    /* play/pause */    
    if (play == true) {
        this.$.play[0].classList.add('pausa');
        this.$.music[0].play();
    }
    else {
        this.$.play[0].classList.remove('pausa');
        this.$.music[0].pause();
    }
};

var $carousel = new Player( $('body') );
var play = false

复制此播放器的音乐曲目

0 个答案: