how to get a return from UniHtmlFrame

Darlan · August 19, 2025

Criei um player para reproduzir uma playlist de .mp3 em HTML, usei UniHtmlFrame, até agora tudo bem, agora preciso saber quando a playlist terminou de tocar, como posso receber essa informação na minha aplicação?

Sherzod · August 19, 2025

Hello,

Attach a JS ended handler to the <audio> element, and from there send an event to uniGUI using ajaxRequest(...). In Delphi, handle it in the OnAjaxEvent.

Darlan · August 25, 2025

Hello Sherzod,

Thank you for the tip, but I still haven't gotten the feedback I want. I'll send you the source code. If possible, take a look and see if I'm doing it correctly. Thank you:

// HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Player</title>
    <style>
        .player-container {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        #playBtn {
            background: none;/
            border: none;
            cursor: pointer;
            font-size: 19px;
   align-items: center;
        }
        #pauseBtn {
            background: none;/
            border: none;
            cursor: pointer;
            font-size: 17px;
   align-items: center;
        }


        #playBtn {
            color: green;
        }
        #pauseBtn {
            color: black;
            display: none;
        }
        audio {
            display: none; /* Oculta controles padrão do player */
        }
    </style>

</head>
<body>
    <div class="player-container">
        <button id="playBtn">&#9658;</button> <!-- Ícone de play (triângulo) -->
        <button id="pauseBtn">&#10074;&#10074;</button> <!-- Ícone de pause (barras) -->
    </div>

    <audio id="player">
        <source src="" type="audio/mpeg">
        Your browser does not support the audio tag.
    </audio>

    <script>
        // Set your playlist here in the order you want
        const playlist = [
             "musica1.mp3",
             "musica2.mp3",
             "musica3.mp3"
        ];

        let currentTrack = 0;
        const audioPlayer = document.getElementById('player');
        const playBtn = document.getElementById('playBtn');
        const pauseBtn = document.getElementById('pauseBtn');

        // Function to play the current song
        function playTrack() {
            audioPlayer.src = playlist[currentTrack];
            audioPlayer.play();
            playBtn.style.display = 'none';
            pauseBtn.style.display = 'inline-block';
        }

        // Pause function
        function pauseTrack() {
            audioPlayer.pause();
            playBtn.style.display = 'inline-block';
            pauseBtn.style.display = 'none';
        }

        // Function to play the next song
        function playNext() {
            currentTrack++;
            if (currentTrack < playlist.length) {
                playTrack();
            } else {
                // You've reached the end of the playlist, stop playing.
                currentTrack = playlist.length; // Impede avançar mais
                audioPlayer.pause();
                playBtn.style.display = 'inline-block';
                pauseBtn.style.display = 'none';


		// I'll get back to you as the playlist is finished...
                
                // ******** includes the line below **********************************
 
          	Uni.ajaxRequest(Uni.MainForm, "playlistEnded", ["Terminou de tocar"]);

                // *******************************************************************
 			
            }
        }
        // Event fired when the current song ends
        audioPlayer.addEventListener('ended', playNext);

        // Play and pause controls
        playBtn.addEventListener('click', playTrack);
        pauseBtn.addEventListener('click', pauseTrack);

        // Configures the player to not show default controls
        audioPlayer.controls = false;

        // Sets the size of the volume control and progress bar to 0
        audioPlayer.style.volume = '0px';
        audioPlayer.style.progress = '0px';

        // Starts with the play button visible
        window.onload = function() {
            playBtn.style.display = 'inline-block';
            pauseBtn.style.display = 'none';
        };
    </script>
</body>
</html>

// DELPHI with UNIGUI

procedure TMainForm.UniFormAjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
var
   MensagemRetorno: string;
begin
   // Check if the event that arrived is the one you triggered from the HTML

   if EventName = 'playlistEnded' then
      begin

ShowMessage('Event: ' + EventName);

          // Recupere a string enviada como parâmetro do JavaScript
          if Params.Count > 0 then
             Begin

ShowMessage('Params > 0 ' + EventName);

                MensagemRetorno := Params.ToString; // Deve ser "Terminou de tocar"
                //Params['0'] // Deve ser "Terminou de tocar"
                UniSession.AddJS('alert(' + QuotedStr(MensagemRetorno) + ');');
             End
          else Begin

ShowMessage('Params = 0 ' + EventName);

             MensagemRetorno := 'Playlist finished, but no message!';
             // Now you have the "Finished playing" string on the server side.
             UniLabel1.Caption := MensagemRetorno;
          End;
      end;

end;

Sherzod · August 25, 2025

Hello!

It would be nice if you could create a test case so that I can easily check it on my side.

Darlan · August 25, 2025

8 hours ago, Sherzod said:

Hello!

It would be nice if you could create a test case so that I can easily check it on my side.

Do you think the command and location I put within the script is correct?

Uni.ajaxRequest(Uni.MainForm, "playlistEnded", ["Terminou de tocar"]);

Sherzod · August 25, 2025

8 hours ago, Darlan said:

Uni.ajaxRequest(Uni.MainForm, "playlistEnded", ["Terminou de tocar"]);

ajaxRequest(MainForm.window, "playlistEnded", ["Terminou de tocar"]);

Darlan · August 26, 2025

14 hours ago, Sherzod said:
  

It turned out great, thanks Sherzod.

Taking advantage of the post, could I do it the other way around now, sending a click command to the button I created in the HTML within the UniHtmlFrame, without having to click the Play button?

playBtn . addEventListener ( 'click' , playTrack );

Sherzod · August 26, 2025

30 minutes ago, Darlan said:

sending a click command to the button I created in the HTML within the UniHtmlFrame, without having to click the Play button?

Hello,

For your case, for example:

procedure TMainForm.UniButton2Click(Sender: TObject);
begin
  JSInterface.JSCallGlobal('document.getElementById("playBtn").click', []);
end;

Sign In

how to get a return from UniHtmlFrame

Recommended Posts

Darlan

Sherzod

Darlan

Sherzod

Darlan

Sherzod

Darlan

Sherzod

Join the conversation

Browse

Activity