Question

所以我一直在网上搜索这个，但没有设法找到一些propper文档或启发答案。我试图建立一个有趣的在线音乐播放器，并且已经陷入了跳转到BarUI播放列表中特定音轨的这个简单任务。作为参考，here是SoundManager2页面上的BarUI引用。

在我的特定问题上添加一些细节：

我将一堆曲目添加到播放列表中（通过添加相应的 li HTML元素）并添加好的
在我的BarUI播放列表中添加这些元素（曲目）之后，我想跳到第一个并开始播放它们，但是我没有关于如何控制BarUI的想法（通过直接与SoundManager API交互），我能够做到这一点，但是BarUI播放器不知道正在播放什么音轨，所以基本上我正在播放背景中不是我想要的歌曲。

任何人都可以告诉我如何从BarUI的播放列表中跳转到跟踪或播放曲目？ （我想它应该只是知道要调用哪些函数，因为我可以通过向下滚动到轨道并单击播放btn来手动执行此操作）

我希望这不是一个非常愚蠢的问题。如果我设法提出一些有用的东西，我会继续尝试并发布答案。感谢。

Answer 1

一直在努力解决这个问题并发现上述解决方案工作正常，但似乎bar-ui.js内置了一个函数来执行此操作。

致电

window.sm2BarPlayers[0].actions.play(j)

其中j是播放列表中曲目的位置。

Answer 2

很好，经过几个小时的调整后，它帮了我很多次，我注意到bar-ui暴露了玩家对象，但它看起来不可用，对象是

window.SM2BarPlayer

我想指出的一件事是，你必须检查ID selected_track_link是否存在，我们必须删除它，如果它存在，然后附加到dom，所以我这样做了：

if($("#selected_track_link").length > 0){
    $("#selected_track_link").remove();
}

$('.sm2-playlist-bd li').removeClass('selected');

希望它有助于某人

Answer 3

因此，经过一些阅读和搜索（找到非常有用的SoundManager2 here社区论坛），我发现Bar UI仍然是一项正在进行的工作（目前还没有propper API和一些功能缺失了。）

我最终模拟了在我的 li 曲目元素添加到Bar UI播放列表的链接上的点击事件。我确定必须有一些方法来调用/暴露bar-ui.js中的方法，但我发现这是最直接的方法。对于更复杂的任务，可能需要直接编辑bar-ui.js文件。

所以，我做的是：

将曲目（ li 元素）追加到当前播放列表

    // I'm doing an Ajax call to retrieve the tracks data (JSON or sth)
    // and place it in appropriate variables, in my case trackName...
    var trackName = data.TrackName;
    var trackUrl = data.TrackStreamUrl;
    var trackId = data.Id;
    var trackListItemHtml = '';

    // if this is the first track from the bunch of tracks we are 
    // about to add, we want it to be selected in the playlist 
    // and begin play from here
    if (selectedToPlayNext) {
        $('.sm2-playlist-bd li').removeClass('selected');
        trackListItemHtml = '<li class="selected"><a id="selected_track_link"  href="' + trackUrl + '"><b>' + trackName + '</b></a></li>';
    } else {
        // else, we want basic li elements containing links to the tracks
        trackListItemHtml = '<li><a href="' + trackUrl + '"><b>' + trackName + '</b></a></li>';
    }

    // append new track to our playlists
    $('.sm2-playlist-wrapper .sm2-playlist-bd').append(trackListItemHtml);

开始播放新添加的曲目（从最顶层开始，即选中）

     // we do this using plain Javascript (instead of JQuery selectors)
     // because for some reason JQuery doesn't want to trigger click 
     // event on plain text inside a **html link** element
     document.getElementById('selected_track_link').click();

可能不是最好的方法，但它做到了。不过可以获得帮助（用于在没有与玩家实际交互的情况下在Bar UI播放列表中进行随机播放或编程触发）

Answer 4

我在mediaElemet.js上创建了一个全宽响应音频播放器，请在此处查看，因为它符合我们的需求https://github.com/razzbee/audioElement.js

Answer 5

这是我对上述问题的回答。 jQuery的（＆＃34; .songs＆＃34）。在（＆＃34;单击＆＃34;，函数（）{ var found = 0; //检查歌曲是否已经在播放列表中，如果不是0，如果它已经在播放列表中，那么它就是1 ...

            var thiss = jQuery(this);
            jQuery(".sm2-playlist-wrapper .sm2-playlist-bd li a").each(function(index, element) { //to check each li item in playlist to match the url of clicked anchor tag if it matches the url in playlist then found become 1
                if(jQuery(this).attr("href")==thiss.data('link')){
                    found = 1;  
                }
            });

            if(found==0){ //if clicked element is not in playlist already

                jQuery("#selected_track_link").removeAttr("id");
                jQuery(".sm2-playlist-wrapper>.sm2-playlist-bd").append("<li><a class='selected' id='selected_track_link' href='"+jQuery(thiss).data('link')+"'>"+jQuery(thiss).data('title')+" - "+jQuery(thiss).data('artist')+"</li>");
                jQuery(".sm2-playlist-wrapper>.sm2-playlist-bd li").removeClass("selected");

                document.getElementById('selected_track_link').click(); 



            }else{ // if clicked element already in playlist then remove the selected song and assign playing to clicked song
                jQuery(document).find("#selected_track_link").removeAttr("id");
                jQuery(".sm2-playlist-wrapper>.sm2-playlist-bd li").removeClass("selected");
                jQuery(".sm2-playlist-wrapper .sm2-playlist-bd li a").each(function(index, element) {
                if(jQuery(this).attr("href")==thiss.data('link')){
                        jQuery(this).attr("id","selected_track_link");
                        jQuery(this).closest("li").addClass("selected");
                    }
                });
                document.getElementById('selected_track_link').click();
            }



        });

跳转到BarUI播放列表SoundManager2中的曲目

5 个答案: