play audio from container field in web viewer?

[human]

I have a solution that is a catalogue of audio files. The actual audio files exist on a web server, and I play them in a web viewer. However the user can alternatively play them from a local folder if he has a copy of that, and that is done by copying a reference to that local file into an interactive container field. This works fine, however the web viewer player looks better - it has fast forward by 30 seconds and back by 15 seconds buttons, and a time display on the progress bar, while the interactive container does not.

I read somewhere that I should be able to play the local file in a web viewer by first referencing it in the container, then getting it's URL by doing:

GetContainerAttribute ( the_field ; "externalfiles" ) and appending "file:"/ to the start of that, then using that as the web viewer address. But it doesn't work - just doesn't play or make any sound. I also tried "filemac" and "movie", but no go. I think it may be because the file location for the web viewer might have to be a temporary folder that Filemaker has access to, but if so, then why does it have no problem playing it in a container?

[comment]

5 hours ago, human said:

that is done by copying a reference to that local file into an interactive container field

Where is this reference coming from? If you want to play the local file in a web viewer, I don't see why you need to go through a container field.

In any case, if you want to see what the resulting URL should look like, drop one of the local files into a browser and compare the contents of the address bar with the result of your calculation. Note that the platform - Mac vs. Win - can play a role here.

 

[human]

this works:

file:///Users/jim/Documents/TempTracks/UNSOLD_aac/000/000001.m4a

but this does not, gives an error:

file:///Users/jim/Desktop/TempTracks/UNSOLD_aac/000/000001.m4a

I also tried movie:/// and filemac:///, neither work

So I assume that the web viewer can only access files in documents or temporary folders? Is this documented anywhere?

Edited January 31, 2021 by human

[comment]

20 minutes ago, human said:

when I drag the file into a browser I get

file:///Users/jim/Desktop/TempTracks/UNSOLD_aac/000/000001.m4a

But when I use that address in the web viewer, it gives an error

I am afraid I cannot reproduce this problem. Both URLs in the form of:

file:///Users/MyUserName/Folder/Folder/Folder/fileName.xyz

or:

file:///Volumes/Macintosh HD/Users/MyUserName/Folder/Folder/Folder/fileName.xyz

work for me in the web viewer. What is the exact error you get?

 

25 minutes ago, human said:

I also tried movie:/// and filemac:///, neither work

That is a futile attempt. A web viewer is an instance of a web browser; it needs a URL to access a file. In case of a local file, it needs to access the local host - see:
https://en.wikipedia.org/wiki/File_URI_scheme.

"movie:" and "filemac:" are prefixes used in Filemaker paths, not in URL paths. See also:
https://help.claris.com/en/pro-help/content/convert-from-filemaker-path.html

 

31 minutes ago, human said:

I think but could be wrong that the web viewer can only access files in documents or temporary folders?

I experience no such limitation.

 

[human]

1 hour ago, comment said:

I am afraid I cannot reproduce this problem. Both URLs in the form of:

file:///Users/MyUserName/Folder/Folder/Folder/fileName.xyz

or:

file:///Volumes/Macintosh HD/Users/MyUserName/Folder/Folder/Folder/fileName.xyz

work for me in the web viewer. What is the exact error you get?

It spun for a while and then said "error". This is Filemaker Pro 19.2.1.14 running on Mac OS 10.15.7 (Catalina). Allowing Filemaker Pro "full disk access" seems to have fixed the issue. However, since this solution will be hosted on a server, it's too inconvenient to reach out to all the users and ensure that they have full disk access enabled, so I will make do with the container version for local files I guess. Thanks.

 

 

[human]

I went back and revisited this and now I am pretty confused, because, even with full disk access enabled, I can't get the web viewer to play the audio either from my documents or desktop folder. If I paste the address "file:///Users/jim/Documents/000001.m4a" into Safari it plays in Safari, but won't play in the web viewer with this code:

"data:text/html,  <body style='border=0;overflow:hidden'> <body topmargin=0> <body leftmargin=0> <audio controls preload='none' style='width:480px;'> <source src=file:///Users/jim/Documents/000001.m4a type='audio/mp4'>  <p>Your browser does not support HTML5 audio.</p>  </audio> "

The player shows controls but nothing happens when I click play. But works fine with a valid https web URL

Edited February 7, 2021 by human

[LelandLong]

I have sound files playing nicely in a web viewer using Javascript.
I believe I tried what you are trying initially and did not have any luck.

If this is useful to you then I would be thrilled to share this idea with you.

1) insert the sound file into a container field somewhere, anywhere ( I am using a file type .m4a which I understand to be the same as .mp4)

2) In a calc field I encode the file in that container using this calc:  "Base64EncodeRFC ( 3548 ; MyTable::mySoundFile )" (according to a snippet I found somewhere this 3548 value will leave out line-breaks for large files)

3) I am storing that encoded text in a script variable $audioSound, which I merge into my finished $html variable, that gets pushed into my webViewer
In my FM $javascript script variable containing my JS code I have:   "var audioSound = "***AUDIO_SOUND***";"
In my $html variable I have:  Substitute ( $javascript ;  "**AUDIO_SOUND**" ; $audioSound ] )
All these 3 lines do is get the Base64 encoded text into my Javascript variable "audioSound" which is now included in the finished $html variable that gets loaded into my webViewer.
Hopefully that was not too confusing.

4) in Javascript I trigger the sound somehow in code, and here is the code that plays the sound:
var soundEffect = new Audio("data:audio/mp4;base64," + audioSound);
soundEffect.play();

So, to summarize, this is the 2 lines of javascript that does the magic (my explanation above is just how I end up with these two lines populated with that huge text block of encoded data):
var soundEffect = new Audio("data:audio/mp4;base64," + "<<YOUR BASE64 ENCODED SOUND DATA>>");
soundEffect.play();

Note: this sound plays without user controls, and plays asynchronously.

[human]

I'll try this. However, not sure what you mean by "Note: this sound plays without user controls, and plays asynchronously.". The whole reason for me to want it in a web viewer is because the default HTML5 controls work better than FM's "interactive" container controls. For example, if you turn on autoplay in FM's version, there is no way to stop it that I have found, even if you overwrite the container with "". In the HTML5 version, autoplay works great and the track stops playing as soon as i set the global field that holds the URL to "". 

Thanks.