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, 2017 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, 2017 at 20:15

1 Answer 1

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, 2017 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, 2017 at 21:18
  • @Liam Thanks! I updated the answer with that. Thanks for sharing.
    – javanoob
    Feb 12, 2017 at 21:22

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .