Audio in editable grid

Applications Grid / Reports
#1

I have an editable grid where user can select and upload an audio to the server. Link on the right (see arrow) works, and when the user licks the link the browser starts downloading file, to play it in default player.
I need the change this behavior, so instead the audio will be played in the browser (without downloading it). Very much the same way as YouTube video works.

any ideas ?

Arthur

#2

Hi,
pretty easy would be to embed a player in your grid.

Create a label field (i.e. {player}).
In the onLoadRecord: {player} = “<audio id=‘audio1’ src=‘path_to_your_audio_file’ controls preload=‘auto’ autobuffer></audio>”; // see HTML5 audio object for more

That should give you a start.

jsb

1 Like
#3

This is a little more complex.

  1. I use editable grid
  2. One opened user can upload the file to the server (the file is stored in specific folder)
  3. I have 2 fields FilePath and AudioURL . The first holds the file name only, the second should contain the full URL to the audio file (at this moment it is empty).

Tried your sugestion but it is not working.

{player} = "src="&{AudioURL}&"' controls preload='auto' autobuffer></audio>";

the {player} field shows empty

ADDITIONAL QUESTION
I run the App locally, but the database in on internet. Why the file (when uploaded) goes to the local folder, not the server folder ?
After the audio file is uploaded to the server, how can I readd full URL and fill the AudioURL field automaticaly ?

any examples ?

Arthur

#4

I run the App locally, but the database in on internet. Why the file (when uploaded) goes to the local folder, not the server folder ?

Because upload goes where Apache is running, not database.

After the audio file is uploaded to the server, how can I readd full URL and fill the AudioURL field automaticaly ?

On upload field you define a folder. Did you try to access this folder with relative paths?

Regards

#5

OK, I understand first part of the answer - thanks.

As to the second part:

I have a filed which holds complete URL to the file location (on internet).
I filled it out manually just for testing, then I uploaded the file manuall to the FTP server.
When I click VISIT button it plays in separatre browser window (so it is working in general), however the code posted above is not :frowning:

Art

#6

Your string should look like

{player} = “src=’”.{AudioURL}."’ controls preload=‘auto’ autobuffer></audio>";

jsb

#7

For some reason this still doesn’t work. IT displays the string in the {player} column. I can see the SRC replaced with the URL from the database, but no way to play…
Bot sure if the fact that this is “Editable Grid View” form has anything to do with the problem. Can you please try it with this type of form and confirm it is working ?
Thank you

Arthur

player_error.jpg

#8

Hi,
you have to set the field {player} to type Label.

jsb

#9

that’s what I did

player_error2.jpg

#10

Sorry, I overlooked the missing audio tag at the beginning.
Try this:

{player} = “<audio src=‘http://www.younglivingconnection.com/lib/distributor_training/DistributorTrainingProgram_CD7_2.mp3’ controls preload=‘auto’ autobuffer></audio>”;

jsb

#11

Resolved

Thank you JSB - now it all works fine !

#12

How can I implement this for the standard grid App ???