如何从标签上播放音乐？

Question

我正在为mp3音乐制作网络应用程序。但是我陷入了困境。

我正在使用Jplayer开源插件播放mp3音乐。

以下脚本用于播放音乐：

$(document).ready(function () {

    var myPlaylist = new jPlayerPlaylist({
        jPlayer: "#jplayer_N",
        cssSelectorAncestor: "#jp_container_N"
    },
        [
      {
          title: "Lat lg gyi",
          artist: "Race 2",
          mp3: "Music/Lat Lag Gayi (Race 2)-(FreshMaza.co).mp3",
          poster: "images/m0.jpg"
      }
    ], {
        playlistOptions: {
            enableRemoveControls: true,
            autoPlay: false
        },
        swfPath: "js/jPlayer",
        supplied: "webmv, ogv, m4v, oga, mp3",
        smoothPlayBar: true,
        keyEnabled: true,
        audioFullScreen: false
    });

    $(document).on($.jPlayer.event.pause, myPlaylist.cssSelector.jPlayer, function () {
        $('.musicbar').removeClass('animate');
        $('.jp-play-me').removeClass('active');
        $('.jp-play-me').parent('li').removeClass('active');
    });

    $(document).on($.jPlayer.event.play, myPlaylist.cssSelector.jPlayer, function () {
        $('.musicbar').addClass('animate');
    });

    $(document).on('click', '.jp-play-me', function (e) {
        e && e.preventDefault();
        var $this = $(e.target);
        if (!$this.is('a')) $this = $this.closest('a');

        $('.jp-play-me').not($this).removeClass('active');
        $('.jp-play-me').parent('li').not($this.parent('li')).removeClass('active');

        $this.toggleClass('active');
        $this.parent('li').toggleClass('active');
        if (!$this.hasClass('active')) {
            myPlaylist.pause();
        } else {
            var i = Math.floor(Math.random() * (1 + 7 - 1));
            myPlaylist.play(i);
        }

    });
});

这是HTML代码。

<footer class="footer bg-dark">
<div id="jp_container_N">
    <div class="jp-type-playlist"> 
        <div id="jplayer_N" class="jp-jplayer hide"></div> 
        <div class="jp-gui">
            <div class="jp-video-play hide">
                <a class="jp-video-play-icon">play</a>
            </div> 
            <div class="jp-interface"> 
                <div class="jp-controls"> 
                    <div>
                        <a class="jp-previous"><i class="icon-control-rewind i-lg"></i>
                        </a>
                    </div> 
                    <div> 
                        <a class="jp-play">
                            <i class="icon-control-play i-2x"></i>
                        </a> 
                        <a class="jp-pause hid">
                            <i class="icon-control-pause i-2x"></i>
                        </a>
                    </div> 
                    <div>
                        <a class="jp-next">
                            <i class="icon-control-forward i-lg"></i>
                        </a>
                    </div> 
                    <div class="hide">
                        <a class="jp-stop">
                            <i class="fa fa-stop"></i>
                        </a>
                    </div> 
                    <div>
                        <a class="" data-toggle="dropdown" data-target="#playlist">
                            <i class="icon-list"></i>
                        </a>
                    </div> 
                    <div class="jp-progress hidden-xs">
                        <div class="jp-seek-bar dk"> 
                            <div class="jp-play-bar bg-info"> 
                            </div>
                            <div class="jp-title text-lt"> 
                                <ul> 
                                    <li></li> 
                                </ul> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
                    <div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
                    <div class="hidden-xs hidden-sm">
                        <a class="jp-mute" title="mute">
                            <i class="icon-volume-2"></i>
                        </a> 
                        <a class="jp-unmute hid" title="unmute">
                            <i class="icon-volume-off"></i>
                        </a> 
                    </div> 
                    <div class="hidden-xs hidden-sm jp-volume"> 
                        <div class="jp-volume-bar dk">
                            <div class="jp-volume-bar-value lter"></div> 
                        </div> 
                    </div> 
                    <div> 
                        <a class="jp-shuffle" title="shuffle">
                            <i class="icon-shuffle text-muted"></i>
                        </a> 
                        <a class="jp-shuffle-off hid" title="shuffle off">
                            <i class="icon-shuffle text-lt"></i>
                        </a> 
                    </div> 
                    <div> 
                        <a class="jp-repeat" title="repeat">
                            <i class="icon-loop text-muted"></i>
                        </a> 
                        <a class="jp-repeat-off hid" title="repeat off">
                            <i class="icon-loop text-lt"></i>
                        </a> 
                    </div> 
                    <div class="hide"> 
                        <a class="jp-full-screen" title="full screen">
                            <i class="fa fa-expand"></i>
                        </a>
                        <a class="jp-restore-screen" title="restore screen">
                            <i class="fa fa-compress text-lt"></i>
                        </a> 
                    </div> 
                </div> 
            </div> 
        </div> 
        <div class="jp-playlist dropup" id="playlist">
            <ul class="dropdown-menu aside-xl dker"> <!-- The method Playlist.displayPlaylist() uses this unordered list --> 
                <li class="list-group-item"></li>
            </ul> 
        </div> 
        <div class="jp-no-solution hide"> 
            <span>Update Required</span> 
            To play the media you will need to either update your browser to a recent version or update your 
            <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. 
        </div>
    </div> 
</div> 
</footer>

看起来像这样：

问题

正如您在屏幕截图中看到的一些 标签 。

当我点击标签时，它必须假设播放mp3，但问题是我的Javascript代码（请参阅上面我的javascript代码代码）使用特定的id基于此播放mp3。

这是我的标签代码：

<!--Music working here-->
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" id="jp_container_N"> <!---->
    <div class="item jp-type-playlist"> <!---->
        <div class="pos-rlt"> 
            <div class="item-overlay opacity r r-2x bg-black">
                <div class="text-info padder m-t-sm text-sm">
                    <i class="fa fa-star"></i> 
                    <i class="fa fa-star"></i> 
                    <i class="fa fa-star"></i> 
                    <i class="fa fa-star"></i> 
                    <i class="fa fa-star-o text-muted"></i> 
                </div> 
                <div class="center text-center m-t-n">
                    <div id="jplayer_N" class="jp-jplayer hide"></div> <!---->
                    <a href="#" class="jp-play">
                        <i class="icon-control-play i-2x"></i>
                    </a>
                    <a href="#" class="jp-pause hid">
                        <i class="icon-control-pause i-2x"></i>
                    </a> 
                </div> 
                <div class="bottom padder m-b-sm"> 
                    <a href="#" class="pull-right"> 
                        <i class="fa fa-heart-o"></i> 
                    </a> 
                    <a href="#"> 
                        <i class="fa fa-plus-circle"></i> 
                    </a> 
                </div> 
            </div> 
            <a href="#">
                <img src="images/p1.jpg" alt="" class="r r-2x img-full">
            </a> 
        </div> 
        <div class="padder-v"> 
            <a href="#" class="text-ellipsis">Lat lag gyi</a> 
            <a href="#" class="text-ellipsis text-xs text-muted">Race 2</a> 
        </div> 
    </div> 
</div>
<!--Music working here //END-->
<!--///////////////////////////////END/////////////////////////////--> 

当您查看我的代码时，我无法使用特定的id来播放mp3。我被困在这里。请帮忙！！ ：（

帮助会受到赞赏！