Question

首先，我要感谢所有参与贡献的人，并在论坛/社区中添加，你们为需要时需要信息和帮助的人提供了极其赞赏和重视的资源。对某些人来说很简单，但对许多人来说这意味着数量。再次感谢。

我不是编码或脚本专家，但我肯定学得很快，并且足够了解并且翻译（特别是如果语言被解释）试图让我的网站上的玩家根据上传来填充和传播播放列表文件字符串。

到目前为止，我已完全启动并运行播放器，它正确解析上传链接以显示要播放的单独mp3文件以及每个文件的单独描述信息。

问题是当我单击播放按钮时，所有文件mp3立即播放。我几乎是肯定的，我需要在这里添加一个forEach语句或其他内容：

$(function(){
    $('#player1').plp({
        'volume': 80,
        'playlist':[
            {"title":"{$pic.video_descr }", 
            "author":"{.Me}", 
            "cover":"files/covers/fullfilename", 
            "mfile":"{.siteurl}{.fullfilename}", 
            "duration":"330"},

        ] 
     });
});

每个标题，作者，封面，持续时间和mfile，

或在这附近的某个地方

function init_track(i){
    cpl = i;
    $this.find('.playlist span').removeClass('active');
    $this.find('.playlist span:eq('+i+')').addClass('active');
    $audio.src = options.playlist[i].mfile;
    $this.find('.title').html(options.playlist[i].title);
    $this.find('.author').html(options.playlist[i].author);
    $this.find('.cover').attr('src', options.playlist[i].cover);
}


for(i=0; i < options.playlist.length; i++){
    $this.find('.playlist').append('<span>'+options.playlist[i].author+' - '+options.playlist[i].title+'</span>');
}
init_track(cpl);

$this.find('.playlist span').click(function(){
    init_track($(this).index());
});

这里是完整的.js

(function($) {
    jQuery.fn.plp = function(options) {
        var options = $.extend({
            volume: 50,
            playlist: [],
            autostart: false
        }, options);

        var make = function() {
            var $this = $(this);
            var cpl = 0;
            var $audio = new Audio();
            var isrand = false;

            $this.find('.volume').slider({
                animate: true,
                range: 'min',
                value: options.volume,
                min: 0,
                max: 1,
                step: 0.01,
                slide: function(event, ui) {
                    $audio.volume = ui.value;
                }
            });

            $this.find('.long').slider({
                animate: true,
                range: 'min',
                value: 0,
                min: 0,
                max: 60,
                step: 1,
                slide: function(event, ui) {
                    $audio.currentTime = ui.value;
                }
            });

            $audio.addEventListener('canplay', function(_event) {
                if ($audio.duration) {
                    $this.find('.all').html('&nbsp;/&nbsp;' + toMinit($audio.duration));
                    $this.find('.long').slider({
                        'max': $audio.duration
                    });
                } else {
                    this.find('.all').html('&nbsp;/&nbsp;' + toMinit(options.playlist[cpl].duration));
                    $this.find('.long').slider({
                        'max': options.playlist[cpl].duration
                    });
                }

                if (options.autostart) {
                    $audio.play();
                    $this.find('.tlb_stop').addClass('isplay');
                } else {
                    options.autostart = true;
                }
            });

            $audio.addEventListener('ended', function() {
                if (isrand) {
                    var rand = cpl;
                    while (rand == cpl) {
                        rand = Math.floor(Math.random((options.playlist.length)));
                    }

                    init_track(rand);
                } else {
                    if (cpl == options.playlist.length - 1) {
                        cpl = -1;
                    }
                    init_track(cpl + 1);
                }
            });

            $audio.addEventListener('timeupdate', function() {
                $this.find('.long').slider({
                    'value': $audio.currentTime
                });
                $this.find('.current').html(toMinit($audio.currentTime));
            });


            function toMinit(val) {
                val = Number(val);
                var ost = Math.floor(val % 60);
                var tm = Math.floor(val / 60);
                if (ost < 10) {
                    ost = '0' + ost;
                }
                if (tm < 10) {
                    tm = '0' + tm;
                }
                return tm + ':' + ost;
            }

            function init_track(i) {
                cpl = i;
                $this.find('.playlist span').removeClass('active');
                $this.find('.playlist span:eq(' + i + ')').addClass('active');
                $audio.src = options.playlist[i].mfile;
                $this.find('.title').html(options.playlist[i].title);
                $this.find('.author').html(options.playlist[i].author);
                $this.find('.cover').attr('src', options.playlist[i].cover);
            }

            for (i = 0; i < options.playlist.length; i++) {
                $this.find('.playlist').append('<span>' + options.playlist[i].author + '  - ' + options.playlist[i].title + ' < /span>');
            }
            init_track(cpl);

            $this.find('.playlist span').click(function() {
                init_track($(this).index());
            });

            $this.find('.tlb_prev').click(function() {
                if (isrand) {
                    var rand = cpl;
                    while (rand == cpl) {
                        rand = Math.floor(Math.random() *

                            (options.playlist.length));
                    }

                    init_track(rand);
                } else {
                    if (cpl === 0) {
                        cpl = options.playlist.length;
                    }
                    init_track(cpl - 1);
                }
                return false;
            });

            $this.find('.tlb_stop').click(function() {
                if ($audio.paused) {
                    $audio.play();
                    $(this).addClass('isplay');
                } else {
                    $audio.pause();
                    $(this).removeClass('isplay');
                }
                return false;
            });

            $this.find('.tlb_next').click(function() {
                if (isrand) {
                    var rand = cpl;
                    while (rand == cpl) {
                        rand = Math.floor(Math.random() *
                            (options.playlist.length));
                    }

                    init_track(rand);
                } else {
                    if (cpl == options.playlist.length - 1) {
                        cpl = -1;
                    }
                    init_track(cpl + 1);
                }
                return false;
            });

            $this.find('.vol_icon').click(function() {
                $(this).toggleClass('active');
                $this.find('.volume').fadeToggle(100);
                return false;
            });

            $this.find('.pl_icon').click(function() {
                $(this).toggleClass('active');
                $this.find('.playlist').fadeToggle(100);
                return false;
            });

            $this.find('.while_icon').click(function() {
                if ($audio.loop) {
                    $(this).removeClass('active');
                    $audio.loop = false;
                } else {
                    $(this).addClass('active');
                    $audio.loop = true;
                }
                return false;
            });

            $this.find('.rand').click(function() {
                if (isrand) {
                    $(this).removeClass('active');
                    isrand = false;
                } else {
                    $(this).addClass('active');
                    isrand = true;
                }
                return false;
            });
        };
        return this.each(make);
    };
})(jQuery);

这是PHP / HTML（智能模板）：

<script type="text/javascript" src="/jquery.js">   
</script>
<script type="text/javascript" src="/player.js">  
</script>

{foreach item=pic from=$pics} {/foreach}
<table>
    <tr>
        <td valign="middle">
            {if $pic.ext == 'yt'}
            <div style=
            "background-image:url('http://img.youtube.com/vi/{$pic.ytref}/0.jpg');">
            <div style="height:120px; max-width:120px;">
                    <a alt="video no {$pic.videono}" href=
                    "http://www.youtube.com/v/{$pic.ytref}&amp;fs=1&amp;rel=0::"
                    title="Click to Play"><img height="120" onmouseout=
                    "this.src='playbtred.png'" onmouseover=
                    "this.src='playbty.png'" src="playbtred.png" width=
                    "120"></a>
                </div>
            </div>
            <div style=
            "width:60%;word-wrap: break-word;padding-bottom:20px;">
                {$pic.video_descr }
            </div>{elseif $pic.ext == 'mp3'} 
            <script type="text/javascript">


            $(function(){
            $('#player1').plp({
            'volume': 80,
            'playlist':[
                {"title":"{$pic.video_descr }", 
                "author":"Test2", 
                "cover":"files/covers/1.jpg", 
                "mfile":"{$config.siteurl}{$pic.fullfilename}", 
                "duration":"330"},

            ] 
            });


            });   

            </script><br>
            <div style=
            "width:60%;word-wrap: break-word;padding-bottom:20px;">
            </div>{else} {include file='otheruploads.tpl'}<br>
            {$pic.video_descr } {/if}
        </td>
    </tr>
</table>
<div class="player" id="player1">
    <img alt="" class="cover" src=""><!--album cover-->
     <span class="title"></span><!--song title-->
     <span class="author"></span><!--artist-->
    <div class="long"></div>
    <div class="current">
        00:00
    </div>
    <div class="all"></div>
    <div class="volume"></div>
    <div class="vol_icon"></div>
    <div class="rand"></div>
    <div class="while_icon"></div>
    <div class="toolbar">
        <div class="tlb_prev"></div>
        <div class="tlb_stop"></div>
        <div class="tlb_next"></div>
    </div>
    <div class="pl_icon active"></div>
    <div class="playlist flexcroll"></div>
</div>{/if}

我只是不确定在哪里或如何。我花了最近两天的时间搜索和研究才弄明白。我很确定这很简单，但我现在迷失了，并且非常感谢你的帮助。

添加或创建“forEach”以在javascript / jquery

0 个答案: