I would like to Play Audio file in budibase detail page

[sudhakarphule1]

I am working on music therapy app and created the functionality to upload audio files as an attachment but I am not able to playback these uploaded audio files in detail page also tried embed component but no luck.

Would appreciate any help on this, if this feature is not supported in budibase as out of box any alternative solution is also welcomed because I am done with rest of the application development using budibase but only one part is remaining that is play back of audio

[ConorWebb96]

Hey @sudhakarphule1,

Hi I think I have a solution for your issue! You were on the right track with the embed. The below screenshots shows the structure I used in order to get this working. You may need some styling in order to make it look better.

Table structure below,

Component structure,

Embed code,

Output below,

Hopefully all this makes sense and helps you with your issue.

[sudhakarphule1]

Hi @ConorWebb96
Thanks for your to the point solution on it and I am able to embed the audio tag in UI with your given solution but now I facing the next level issue. Now browser is refusing to play the audio with below error.

I am using the buddibase cloud solution for my application, is there anything on access rights I need to to make this audio files playable in browser

[sudhakarphule1]

Error message in browser console:

refused to load media from 'https://cdn.budi.live/app_tpl_853886474f2e4e5fb58a2c1267076a28/attachments/74db19b2-af3d-450f-ab32-7bb5c76b10d5.wav?Expires=1678118266&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uYnVkaS5saXZlL2FwcF90cGxfODUzODg2NDc0ZjJlNGU1ZmI1OGEyYzEyNjcwNzZhMjgvYXR0YWNobWVudHMvNzRkYjE5YjItYWYzZC00NTBmLWFiMzItN2JiNWM3NmIxMGQ1LndhdiIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTY3ODExODI2Nn19fV19&Signature=iiZBhNe3RAxlihOFHLTpeA2ur4MhYlgtGhTaFARWtVKBNlveSh9NzUHv4wMZMgNbmuPi9-cki239LWN2j33ABJMc~YLzNWIrfDwBQnbDbYAALOJZeYI4B5~-HG6wKKqabw7i7bB0rW~N73EPt8PyOeJVOxM-ousMO2sRJ2HLR4Tf~G4wrOiYCfseS-Dio~WB1O1XTunFUgLdu6HS60zpNpY83yj7OJCsPyDRPeoXRfWWqpIzMeU3edNyMLIz8xzPns1Q4tbdkyhM2-WX711tLsJGJZkjPM9X~ESAPZMWWpMHYsolAVOHeSE2O5oIv1qWToxpsf7UPudDPku1MXvV8w__&Key-Pair-Id=K34KAJ9BCP7IQP' because it violates the following Content Security Policy directive: "media-src 'self' https://js.intercomcdn.com".

[andz-bb]

hey @sudhakarphule1, I've made a fix for this issue here: #9897 - hopefully it will be merged into the codebase and released shortly 👍

[andz-bb]

hi again @sudhakarphule1, just to update you, my fix for the issue you were seeing has been released as part of Budibase v2.4.3. You should be able to see it on your Budibase Cloud instance now 👍

[sudhakarphule1]

Thanks @andz-bb for your quick turn around on this, I am impressed with support I had got for this issue.
Yes the fix you provided is working perfectly fine. Thanks to all who provided support on this.

[ishani-tagore]

@ConorWebb96 I am trying to do something simpler than the poster above, but cannot get the component to display.
I click embed, and paste the following publicly available audio http into the Text, but it doesn't work:

Any thoughts on what I'm missing?

[ConorWebb96]

Hey @ishani-tagore,

You'll need to use the embed component i you want it to output the HTML. Putting it into the text component will just output it as text.

I hope this makes sense.

[ishani-tagore]

I used the Embed component (i.e. the "text" field inside the Embed component). Strangely, it worked when I added a piece of regular text e.g. "Audio bar player:" before the HTML code, but wouldn't work without it. Anyway - resolved.

[ameyalambat128]

I am trying to implement the same from an S3 bucket link in a Modal. Using the following code.

<audio controls>
  <source src="https://cleftcare-test.s3.us-east-1.amazonaws.com/audio-link.m4a" type="audio/mp4">
  Your browser does not support the audio element.
</audio>

Getting the following issue. Would appreciate any help!