3

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!

2
  • I don't know the answer but I am curious as why you want to attach to Opportunity if you can play from static resource?
    – javanoob
    Feb 8 '17 at 19:37
  • 1
    The audio files are directly related to each Opportunity and there will eventually be 1000+ Opportunities each with their own related audio files.
    – Liam
    Feb 8 '17 at 20:15
4

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.

3
  • 2
    Well this issue will probably solve itself in a few days, I am currently on Winter 17 and Spring 17 is scheduled for release 11th Feb on my sandbox instance. Thanks for taking the time to try it out, I was about to spend a lot of time working on another solution.
    – Liam
    Feb 8 '17 at 20:55
  • 1
    Quick update, this seems to be working now, however I still had CSP errors in the console initially, this was fixed by whitelisting via Security Controls -> CSP Trusted Sites.
    – Liam
    Feb 12 '17 at 21:18
  • @Liam Thanks! I updated the answer with that. Thanks for sharing.
    – javanoob
    Feb 12 '17 at 21:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.