Playing an audio file in a form before submitting the form

Question

I have a form :

<form ....>

<input type="file" name="file-main" id="file-main" class="inputfile inputfile-3"  multiple/>
<audio preload="none" src="">
// skipping submission buttons for brevity

</form>

When a user selects a an audio file from the browser, I want to make the selected audio playable in the form so that the user knows what he has selected (before the form is sent to the server). I am new to JS, HTML5, Ajax and Jquery so I'm struggling with these. How do I do it the shortest possible way?

Possible duplicate of [JavaScript Play Uploaded Audio](https://stackoverflow.com/questions/28619550/javascript-play-uploaded-audio) — nils, Jun 01 '17 at 09:27

Yasitha · Answer 1 · 2017-06-01T09:49:50.803

0

You can use html 5 audio player

<form>
    <audio controls>
          <source src="audiofilename" type="audiofiltype">
        Your browser does not support the audio element.
    </audio>
      <input type="checkbox" value="filename/fileid" />
    <audio controls>
          <source src="audiofilename" type="audiofiltype">
        Your browser does not support the audio element.
    </audio>
    <input type="checkbox" value="filename/fileid" />
    <input type="submit" value="Submit">
</form>
<!--//inside here you can put your from with check box then user can play and if he wants to download he can check it then finally you can submit your form.-->

then under that you can put a button to download or what ever form you want.

edited Jun 01 '17 at 09:49

answered Jun 01 '17 at 09:33

Yasitha

901
2
17
42

thanks but I am not using php and don't know php anyways. I was looking for ajax / jquery /JS solution – Aayush Karki Jun 01 '17 at 09:36
but then how did you process user input from server side? – Yasitha Jun 01 '17 at 09:37
I'm using Python flask. Server side is a piece of cake for me, but frontend with scripting is hard – Aayush Karki Jun 01 '17 at 09:39
I updated the answer. like that you just have to put all your audio files and once the user checked what he wanted and submit you can process his input by what ever language you are using. – Yasitha Jun 01 '17 at 09:51

Playing an audio file in a form before submitting the form

1 Answers1