How to embed an audio into my form?

  • ptservice
    Asked on December 22, 2020 at 4:14 PM

    Hello,


    I would like to know if it is possible to embed an audio file in the form, in order for users to play it only once and answer a series of questions based on that.

  • Ahmed_S
    Replied on December 22, 2020 at 5:39 PM

    Hello ptservice,

    There are several options to embed and play audio in your form, you can use any of audio & music widgets like SoundCloud, Dailymotion, Spotify.

    You can also add HTML tag to embed the simple HTML audio player into your form, you can do so by copying the below code and paste it in a paragraph element in your form.

    <audio controls>

     <source src="YOUR_AUDIO_LINK" type="audio/ogg">

     <source src="YOUR_AUDIO_LINK" type="audio/mpeg">

    Your browser does not support the audio element.

    </audio>

    you will replace YOUR_AUDIO_LINK text with your audio file's link or URL (e.g: Google Drive link or direct link).

    1608676756 5fe2759469e67 screen Screenshot 10


    HTML tag reference: https://www.w3schools.com/html/html5_audio.asp

    Please let us know if you need any further assistance.

  • ptservice
    Replied on December 22, 2020 at 9:57 PM

    I was trying to use this solution, but it doesn't works. The audio is no recognized, i need to know how can i search the audio location.

  • roneet
    Replied on December 23, 2020 at 6:47 AM

    You may upload the audio file to a server and then you will get the audio location.

    Could you please upload the audio to Google Drive and share the location of it?

    We will upload it to our server and will share the link.

    Looking forward to your response.

    Thanks.

  • ptservice
    Replied on December 23, 2020 at 10:22 AM

    There is the test location to Google Drive

    https://drive.google.com/file/d/1NScdqPIWm-jHhTzOjqINr6mPRF3O-2S_/view?usp=sharing

    I want to know the resolution if can use the html code with the audio.

    Thanks a lot

  • ptservice
    Replied on December 23, 2020 at 10:26 AM

    Another question more, i want to play the audio only 2 times per person, is this possible?

  • Gustavo_H
    Replied on December 23, 2020 at 11:12 AM

    Hi, ptservice. I am glad to help you today.


    I have tried different ways of using a Google Drive link to embed the audio, but it seems to not working even when I use a full permission link. I have also tried all workarounds shared here, but it was unsuccessful.

    This way, I would like to suggest to use your own website link where your audio file is stored or use a specific widget to do that, like SoundCloud.

    For your last question, I am afraid that is not possible. We cannot add this kind of condition for audio files unless you embed your form on a website and write some custom code. 

    Please, let us know if you need anything else.


    Best regards, 😀✨

  • roneet
    Replied on December 23, 2020 at 11:44 AM

    I have uploaded the audio file to our server. Here is the link:

    https://shots.jotform.com/roneet/InicioP.mp3

    You may follow my colleague suggestion to add the HTML code:

    <audio controls>

     <source src="https://shots.jotform.com/roneet/InicioP.mp3" type="audio/ogg">

     <source src="https://shots.jotform.com/roneet/InicioP.mp3" type="audio/mpeg">

    Your browser does not support the audio element.

    </audio>h

    Let us know in which form you want to implement this?

    Looking forward to your response.

    Thanks.

  • ptservice
    Replied on December 23, 2020 at 12:31 PM

    Are you using an FTP Server? I want to upload some audios, how can i do this?

    I am testing this code and it works corrrectly in a forms. Any idea to remove the download option?


  • Jimmy_D
    Replied on December 23, 2020 at 1:28 PM

    Hi!

    Are you using an FTP Server? I want to upload some audios, how can i do this?

    Unfortunately, you can't upload files to the JotForm FTP server.  I believe @Roneet shared the URL with you so you can use it and embed it into your Form.

    You can create a file upload form. 

    1608747010 5fe3880245533 Screenshot 10

    Use it to submit your audio files, then copy the uploaded file URLs and embed them on your form.- 

    <audio controls>
    
<source src="https://shots.jotform.com/roneet/InicioP.mp3" type="audio/ogg">
    
Your browser does not support the audio element.
    
</audio>

    1608748077 5fe38c2dddbec Screenshot 21

    An easier alternative is to use the SoundCloud widget.

    Demo Form..- https://form.jotform.com/203575313060042

  • ptservice
    Replied on December 23, 2020 at 1:49 PM

    How can i implement this code on a forms?

    This is working for me.

    <!DOCTYPE html>

    <html>

    <body>

    <h1>Audio 1</h1>

    <p>Click on the play button to play a sound:</p>

    <audio id="audioPlayer">

     <source src="https://shots.jotform.com/roneet/InicioP.mp3" type="audio/ogg">

     <source src="https://shots.jotform.com/roneet/InicioP.mp3" type="audio/mpeg">

    Your browser does not support the audio element.

    </audio>

    <button id="playButton">Play audio</button>

    <style>


    </style>


    <script>

    var iterations = 0;

    window.onload = function(){

      var audioPlayer = document.getElementById('audioPlayer');

      audioPlayer.addEventListener('play', function () {   

       iterations++;

       if (iterations >= 3) {    

         document.getElementById('playButton').style.display = 'none';

       }

      }, false);

       

      var playButton = document.getElementById('playButton');

      playButton.addEventListener('click', function () {   

        var audioPlayer = document.getElementById('audioPlayer');

        audioPlayer.play();  

      }, false);

    };


    </script>

    </body>

    </html>

  • Kenneth Enterprise Support
    Replied on December 23, 2020 at 2:34 PM

    Hi there,

    Step 1. You may add a paragraph field hit on the HTML code:

    1608751978 5fe39b6a24924 y1 Screenshot 10

    Step 2. Paste the code:

    1608752018 5fe39b924eeb1 g1 Screenshot 21

    I hope that helps.

    Best.

  • ptservice
    Replied on December 23, 2020 at 4:49 PM

    This part of the code not working with this solution, it's not recognized


    <script>

    var iterations = 0;

    window.onload = function(){

      var audioPlayer = document.getElementById('audioPlayer');

      audioPlayer.addEventListener('play', function () {   

       iterations++;

       if (iterations >= 3) {    

         document.getElementById('playButton').style.display = 'none';

       }

      }, false);

       

      var playButton = document.getElementById('playButton');

      playButton.addEventListener('click', function () {   

        var audioPlayer = document.getElementById('audioPlayer');

        audioPlayer.play();  

      }, false);

    };


    </script>

    </body>

    </html>


  • Jimmy_D
    Replied on December 23, 2020 at 5:12 PM

    It is not possible to inject JavaScript code in the form. This is disabled for security reasons. 

    To be able to use JavaScript on the Form, you will need to download the full source code of the form.

    Here is the guide. how-to-get-the-full-source-code-of-your-form