[SalesForce] Playing Audio files attached to Opportunities in a Lightning Component

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:

<aura:application extends="force:slds">
    <c:PlayAudioFile></c:PlayAudioFile>
</aura:application>

PlayAudioFile.cmp:

<aura:component >
    <audio src="https://john-dev-ed--c.na31.content.force.com/servlet/servlet.FileDownload?file=00P37000008SP6U" 
            autoplay="true">
    </audio>
</aura:component>

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.

Related Topic