JavaScript 音频 Object 如何在单击下一步时播放下一首曲目

Question

我正在制作一个音乐网络应用程序，用户可以在其中加载歌曲或加载一系列音乐。我试图制作一个按钮，用户可以在其中跳过曲目并播放阵列中的下一首曲目。我尝试了自己的方法，实际上效果很好。

这是我的音乐 object:

    getNextSong()
    {
        if(this.songArray && this.i > -1 && this.i<this.songArray.length){
            const nextSong = this.songArray[this.i+1]
            //this.playSong(nextSong)
            return nextSong
        }else{
            return null
        }
    }
    
        getPreviousSong()
    {
        if(this.songArray && this.i > 0 && this.i<this.songArray.length){
            const nextSong = this.songArray[this.i-1]
            console.log(nextSong)
            //this.playSong(nextSong)
            return nextSong
        }else{
            return null
        }
    }


    loadSongs(song, playlist_song = "song")
    {
        if(playlist_song === "playlist"){
            this.songArray = song
            song.forEach(song=>{
                this.audio.src = song.src.aduioURL
                this.audio.load()
            })
        }else if(playlist_song === "song"){
            this.songArray.push(song)
        }
    }
    
      playSong(song)
    {
        this.song = song
        this.audio.src = song.src.aduioURL
        this.play(song)
    }

在音频播放器中：

function next(){
        const nextSong = song.getNextSong()
        if(nextSong)
        {
          song.playSong(nextSong)
        }
      }
      
      function previous(){
        const previousSong = song.getPreviousSong()
        if(previousSong)
        {
          song.playSong(previousSong)
        }
      }

它工作得很好，但问题是，我无法 change/skip 从浏览器控制轨道。例如：- 在 soundcloud 和其他应用程序中如果我在移动设备上使用它，那么我可以从我的锁屏上跳过曲目，会有一个小的浏览器音频控件，我们可以从那里跳过它。但是出于某种原因，我无法在我的应用程序中执行此操作。

这是我正在谈论的图片：

声云：

我的应用程序：

如你所见，我无法从这里控制它。在声音云中，我可以更改曲目。在 soundlocud 中，它还显示歌曲的标题，而在我的中它没有，它只显示我的页面的标题。

我正在使用 React 进行开发

Answer 1

请查看 MediaSession 文档

Media Session Doc

JavaScript 音频 Object 如何在单击下一步时播放下一首曲目

JavaScript Audio Object how to play next track on clicking next

javascript

html

reactjs

html5-audio

web-audio-api