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

Question

所以我一直在网上搜索这个，但没有找到一些合适的文档或有启发性的答案。我正在尝试构建一个小型的在线音乐播放器来获得乐趣，但在跳转到 BarUI 播放列表中的特定曲目这一简单任务上遇到了困难。作为参考，here 是 SoundManager2 页面上的 BarUI 参考。

添加一些关于我的特定问题的细节：

我正在将一堆曲目添加到播放列表（通过附加相应的 li HTML 元素）并且它们被添加好了
在我的 BarUI 播放列表中添加这些元素（曲目）后，我想跳到第一个并开始播放它们，但是我不知道如何控制 BarUI（通过交互直接使用 SoundManager API，我可以做到这一点，但 BarUI 播放器不知道正在播放什么曲目，所以基本上我在后台播放歌曲，这不是我想要的）

谁能教教我如何从BarUI的播放列表跳转到曲目或播放曲目？ （我想这应该只是知道要调用哪些函数的问题，因为我可以通过向下滚动到曲目并单击播放按钮来手动执行此操作）

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

Answer 1

所以在阅读和搜索之后（找到了非常非常有用的 SoundManager2 here 社区论坛），我发现 Bar UI 仍在进行中（那里还没有合适的 API 并且缺少一些功能）。

我最终模拟了 link 上的点击事件，并将我的 li 曲目元素添加到 Bar UI 播放列表中。我确定一定有某种方法可以 call/expose 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 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

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

Answer 4

这是我对上述问题的回答。 jQuery(".songs").on("click",function(){ 变种发现= 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();
            }



        });

Answer 5

为此苦苦挣扎了一段时间，发现上述解决方案工作正常，尽管 bar-ui.js 中似乎内置了一个函数可以执行此操作。

直接打电话

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

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

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

Jump to track in BarUI playlist SoundManager2

html

javascript

jquery

soundmanager2