I am trying to setup a Lightning Component that will be able to play audio files that are attached to an Opportunity using <audio></audio>
tags.
My first test was promising, I uploaded a test file as a static resource and the file was immediately playable. I was hoping I could construct a link to the Opportunity attachment and include that in the audio src like so:
/servlet/servlet.FileDownload-file=*attachment id*
Which gave me the following error:
Refused to load media from 'https://mydomain.my.salesforce.com/servlet/servlet.FileDownload-file=id' because it violates the following Content Security Policy directive: "media-src 'self'".
This led me to try and base64 encode the file and construct a data URI but I receive the same error message as above:
Refused to load media from 'data:audio/mp3;base64,/+NIxAAAAAAAAAAAAFhpbmcAAAAPAAA0uQAgxJAAAwYICg0PEhQXG…rVTEFNRTMuOTguNFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV' because it violates the following Content Security Policy directive: "media-src 'self'".
Apex:
@AuraEnabled
Public Static Map<String, String> getAttachTest(String recordId){
Map<String, String> attData = New Map<String, String>();
for (Attachment att : [Select Id, Name, Body from Attachment where ParentId = :recordId ])
{
attData.put( att.Name, EncodingUtil.base64Encode(att.Body) );
}
return attData;
}
Is there an easy way to achieve this? The end goal is to be able to dynamically populate the <audio>
src attribute with a file that is attached to an Opportunity. Any help would be greatly appreciated!
Best Answer
This is working for me. Do you have different settings? I tested this on Chrome browser. Also this is on Spring'17 environment.
HelloWorldApp.app:
PlayAudioFile.cmp:
I don't see any CSP errors in the console.
EDIT:
If there are any CSP errors in the console, URL needs to be whitelisted in security controls(setup) as OP mentioned in the below comments.