Javascript 如何自动播放下一首曲目

我一直在为我的网站创建一个弹出式播放器，用户可以在其中播放其他用户上传到该网站的音乐播放列表。然而，目前我不得不手动点击每个曲目来播放它，我想知道是否有人已经创建了一个自动播放列表中的下一首歌曲。它知道当前播放哪首歌曲的方式是在一个url变量中定义的，该变量发送用户单击的曲目名称，然后调用数据库查看是否可以找到匹配的曲目，然后我使用源来输出我存储的曲目的位置。我将发布代码，以便更清楚地了解我在做什么：

<cfquery datasource="#mydatabase#" name="getsongs">
    Select *
    From artists, songs
    Where artist_id = song_artistid
</cfquery>

<cfif IsDefined("URL.song")>
    <cfquery datasource="#mydatabase#" name="playsong">
        Select *
        From songs
        Where artist_id = song_artistid
        And song_name = '#URL.song#'
    </cfquery>
</cfif>

<div style="margin: 0 auto; width: 800px;>
    <div style="width: 300px; float: left; overflow: scroll;">
        <cfoutput query="getartists">
            <a href="popup_player.cfm?song=#song_name#>#artist_name# - #song_name#</a>
        </cfoutput>
    </div>

    <cfif IsDefined("URL.song")>
        <div style="width: 500px; float: right;">
            <cfoutput>
                <cfmediaplayer name="song" source="artists/songs/#playsong.song_location#" autoplay="yes" height="500" width="500"></cfmediaplayer>
            </cfoutput>
        </div>
    </cfif>
</div>

---

如您所见，我有一个滚动div，其中列出了用户播放列表中的所有歌曲。通过单击歌曲，它会更新在媒体播放器中播放的曲目。我想知道是否有其他方法，当歌曲结束时，下一个链接可以自动单击，并且可能有一种方法，如果一个变量被设置为在到达最后一首曲目时重复播放列表，它会再次返回到第一首曲目。

请参阅CFMEDIAPLAYER的参考指南。它支持在曲目结束时运行JavaScript。你可以用它来自动调用下一个曲目

歌曲结束时，您可以运行javascript。 添加到当前代码中：

 <cfmediaplayer onComplete=" YOUR_PLAY_NEXT_FUNCTION"  name="song"
 source="artists/songs/#playsong.song_location#" autoplay="yes"
 height="500" width="500"></cfmediaplayer>

---

好的，我以前从未使用过cfmediaplayer，但是这个伪代码应该可以让您达到您需要的位置

这些是我使用的资源

---

干杯唯一的问题是，我如何编写JavaScript来检查播放列表中的下一首曲目？我将这样做，当用户创建一个播放列表时，它会为他们创建一个唯一的XML，因此我想知道是否可以为用户设置的曲目创建一个播放列表编号，以便更轻松地解析和选择下一个曲目。如果您知道曲目服务器端，您可以将它们作为JS变量输出，代码可以使用。请参阅toScript。下面是另一篇可能会有所帮助的博客文章：是的，我可以在服务器端阅读它们，而不必在客户端实际陈述它们，通过toScript函数，我应该能够轻松地传递当前行的值，允许它为我提供正确的链接；我怎样才能让它知道下一个要播放的曲目？我编辑过的一件事是，我在URL中添加了一个playlino变量，其中的值是当前行，因此它知道在查询中跳转到哪里。我所需要的是，当它结束时，它知道去链接@Leeb我还没有尝试过，但这对你有用吗？变量i=0；//这应该是当前歌曲编号$按钮。单击时，函数{i++//将+1添加到当前歌曲编号var curr\u song=artists/songs/playsong.song\u location+i；//使用标准url+添加的歌曲编号$'cfmediaplayer.attrname，curr\u song；//将属性更改为新歌曲url}；如果JavaScript显示播放列表所在的当前行，这将是一个不错的解决方案。不幸的是，它没有，每首歌曲都有它自己的行，基于它在查询中的位置，这就是我想要通过编辑当前行并自动移动到列表中的下一行来控制曲目导航的方式。

var i = 0; // This should be the current song_no 
$("#button").on('click', function(){ 
    // Adds +1 to the current song number
    i++  
    // Create a variable using the standard url + the added song-number
    var curr_song = "artists/songs/#playsong.song_location#"+i;  
    // Changes the attribute to the new song-url 
    $('cfmediaplayer').attr("name",curr_song); 
});

<cfquery ...>
Select
   songUrl
from
   songs
</cfquery>
<!--- build your coldFusion array of song URLs --->
<cfset urlList = valueList(query.songURL)>
<cfset urlArray = listToArray(urlList)>

<script>
    <cfoutput>
    #toScript(urlArray)#
    var songIndex = #query.currentRow-1#; <!--- or url.currentRow, whatever you're using --->
    </cfoutput>
    startNext(){
        songIndex++;
        if(songIndex <= urlArray.length){                
            ColdFusion.Mediaplayer.setSource('mediaPlayerName', urlArray[songIndex]);
            ColdFusion.Mediaplayer.startPlay('mediaPlayerName');
        }
    }
</script>