Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML audio playlist || stop a song when other one is played + autoplay on finish

QML audio playlist || stop a song when other one is played + autoplay on finish

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
multimediaaudioplayerqmlmusicaudio qml
6 Posts 5 Posters 1.6k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • N Offline
    N Offline
    newbiSoso
    wrote on 31 May 2019, 15:00 last edited by
    #1

    I'm trying to build a music player, I was able to play/pause music on click but a song keeps playing after choosing another one, also how do I make my app autoplay the next song after finishing the current one?
    This is my current playlist code:

    AppListView {
                    model: pathModel      ///C++ model contains all music URLs 
                    delegate:Rectangle{
                        id: rect
                        height: page.height/6
                        width: page.width
                        anchors.topMargin: (page.height/height)*(modelData.indexOf(model.fileURL)-1)
                        Audio {
                            id: playMusic
                            source: modelData
                        }
                        Text{
                            id: ooo
                            text: Qt.resolvedUrl(modelData).slice(Qt.resolvedUrl(modelData).lastIndexOf("/")+1,Qt.resolvedUrl(modelData).lastIndexOf("."))  //to print only song's name
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.verticalCenter: parent.verticalCenter
                            font.pixelSize: 20
                        }
                        MouseArea {
                            id: playAreafiles
                            anchors.fill: parent
                            onClicked: {
                                if (Audio.playbackState === Audio.PlayingState){ //auto stopping the audio before playing failed
                                    Audio.stop() 
                                    Audio.play()
                                }
                                if((playMusic.playbackState === Audio.PlayingState))
                                    playMusic.pause()  //pause if clicked while playing
                                else
                                    playMusic.play() //play otherwise
                            }
                        }
                    }
                }
    

    I have no idea how the autoplay next song works too, any help will be appreciated.

    1 Reply Last reply
    0
    • P Offline
      P Offline
      Pradeep P N
      wrote on 1 Jun 2019, 04:01 last edited by
      #2

      Hi @newbiSoso
      As per my understanding the problem in your code is that in ListView every ListElement has its own copy of Audio & MouseArea and you can play and pause the same song only on clicking the same element.
      When you click on the other element the previous element's AudioPlayback state is not affected.

      Can you please have a look at Playlist QML Type, might help you.

      Or you have to change the way you handle the Audio in your ListView {}

      Pradeep Nimbalkar.
      Upvote the answer(s) that helped you to solve the issue...
      Keep code clean.

      N 1 Reply Last reply 1 Jun 2019, 06:01
      3
      • P Pradeep P N
        1 Jun 2019, 04:01

        Hi @newbiSoso
        As per my understanding the problem in your code is that in ListView every ListElement has its own copy of Audio & MouseArea and you can play and pause the same song only on clicking the same element.
        When you click on the other element the previous element's AudioPlayback state is not affected.

        Can you please have a look at Playlist QML Type, might help you.

        Or you have to change the way you handle the Audio in your ListView {}

        N Offline
        N Offline
        newbiSoso
        wrote on 1 Jun 2019, 06:01 last edited by
        #3

        @Pradeep-P-N I tried using Playlist type but didn't know how to pass my model to it, it's a c++ model that contains the URL's of my music:

        static QStringList pathList;
        
        ….
        int main(int argc, char *argv[]){
        …..
        QDirIterator it("E:/", QStringList() << "*.mp3", QDir::Files, QDirIterator::Subdirectories);
                while (it.hasNext()){
                    qDebug() << it.next();
                    pathList.append(it.next());
                }
            QQmlContext *ctxt1 = engine.rootContext();
            ctxt1->setContextProperty("pathModel", QVariant::fromValue(pathList)); //used model pathmodel
        
        ….
        }
        
        1 Reply Last reply
        0
        • S Offline
          S Offline
          Shrinidhi Upadhyaya
          wrote on 3 Jun 2019, 08:49 last edited by Shrinidhi Upadhyaya 6 Mar 2019, 08:50
          #4

          Hi @newbiSoso ,

          • l dont think so there is a prebuilt property in Audio which will let you pause a song when another song is playing and autoplay a song when a song is completed.You need to write your own logic for them.

          Note:- I have never worked or tried with Playlist though, so as @Pradeep-P-N suggested you can have a look into its documentation for more information about it.

          • I have used Audio and have written a sample code with features like

            • Play/Pause

            • Pausing the previous song when the new song is clicked.

            • Auto-playing the next song when the current song is over.

          Sample Code:-

           ListModel {
              id: audioDummyModel
          
              ListElement {
                  audioURL: "file:///C:\\Users\\USHRINI\\Music\\One.mp3"
                  playState: false
              }
          
              ListElement {
                  audioURL: "file:///C:\\Users\\USHRINI\\Music\\One.mp3"
                  playState: false
              }
          
              ListElement {
                  audioURL: "file:///C:\\Users\\USHRINI\\Music\\Two.mp3"
                  playState: false
              }
          
              ListElement {
                  audioURL: "file:///C:\\Users\\USHRINI\\Music\\Two.mp3"
                  playState: false
              }
          }
          
          ListView {
              anchors.fill: parent
              spacing: 10
              model: audioDummyModel
          
              delegate:Rectangle{
                  id: rect
          
                  height: 100
                  width: 300
                  color: "cyan"
                  border.color: activeFocus?"red":"black"
                  border.width: 4
          
                  Audio {
                      id: playMusic
          
                      source: audioURL
          
                      property bool tempPlayBackState: playState
          
                      onTempPlayBackStateChanged: {
                          console.log("Temp State:",index,tempPlayBackState)
                          if(tempPlayBackState) {
                              playMusic.play()
                              rect.forceActiveFocus()
                          } else {
                              playMusic.stop()
                          }
                      }
          
                      onStopped: {
                          console.log("Stopped",index,status)
                          if(status === 7) {
                              playState = !playState
          
                              if(index > -1 && index < audioDummyModel.count - 1) {
                                  audioDummyModel.setProperty(index+1, "playState", true);
                              }
                          }
                      }
                  }
          
                  onActiveFocusChanged:  {
                      console.log("Focus:",focus,index)
                      playState = focus
                  }
          
                  Text{
                      text: audioURL
                      anchors.centerIn: parent
                  }
          
                  MouseArea {
                      anchors.fill: parent
                      onClicked: {
                          console.log("Focus on Click",rect.activeFocus)
                          if(rect.activeFocus) {
                              switch (playMusic.playbackState) {
                              case 1:
                                  playMusic.pause();
                                  break;
                              case 2:
                                  playMusic.play()
                                  break;
                              }
                          } else {
                              rect.forceActiveFocus()
                          }
                      }
                  }
              }
          }
          

          Sample Output:-

          0_1559551526609_13b14110-c3d3-45ed-ba32-044b07e92f98-image.png

          The song which is currently playing or paused will be highlighted in red.

          Note:- Just copy paste the code and specify your own URL model, i have just written a dummy model in qml. So first try with just 2 or 3 songs from a harcoded path, if they work then you can specify your C++ model.I guess the code can be optimized more, but its just a sample code so if its working according to your expectations and features then after that you can optimize the code.

          Shrinidhi Upadhyaya.
          Upvote the answer(s) that helped you to solve the issue.

          1 Reply Last reply
          4
          • F Offline
            F Offline
            flashhmob
            wrote on 7 Jul 2019, 13:13 last edited by flashhmob
            #5

            Thanks for sharing this information. It's really helpful. Do i need a gmail account created from gmail accounts free list for playing this playlist?

            1 Reply Last reply
            0
            • S Offline
              S Offline
              Shahid Ali
              wrote on 13 Oct 2024, 08:05 last edited by
              #6

              For audio playlist management and cross-platform transfers, I highly recommend using MuzConvtool, which makes it easy to move playlists between these services without losing track of your favorite songs.

              1 Reply Last reply
              0

              • Login

              • Login or register to search.
              • First post
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved