function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Michael J. LupinoMichael J. Lupino 

Refused to load media because because it violates the following Content Security Policy directive

I’m looking at some code that contains some errata from a recent Salesforce University class. Would someone be willing to point me in the direction of how to address?  I know Locker Service is what is causing the issue. I’m not sure how to address it in my code. I didn’t have enough time to ask the instructor to look it over. My issue is that the 2nd selection in the dropdown explosion throws an error. The first does not. If i flip the sound file, I can hear explosion but not sad trombone. 

Here’s the component markup, controller and helper

Component:
<aura:component implements="force:appHostable,force:lightningQuickAction,flexipage:availableForAllPageTypes"
                access="global"
                description="Never press the big red button!!!"
                controller="PanicButtonServerController">
    <aura:attribute name="sound"
                    type="String"
                    default="Sad Trombone"
                    description="valid values=Sad Trombone|Explosion,see docs for more details"/>
    <aura:attribute name="message"
                    type="String"
                    default="D'Oh"
                    description="Message to display while audio is playing"/>
    <aura:attribute name="soundUrl"
                    type="String"
                    default=""
                    access="PUBLIC"/>
   
    <aura:attribute name="soundOptions"
                    type="SoundClip__c[]"
                    default="[]"
                    access="PUBLIC"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <div>
        <lightning:button onclick="{!c.handleClick}" variant="base">
            <div class="panicbutton"  />
        </lightning:button>
        <lightning:select name="soundSelector"
                          label="Select Sound"
                          aura:Id="soundSelector"
                          value="{!v.soundUrl}">
       <aura:iteration items="{!v.soundOptions}" var="option">
                <option value="{!option.fileUrl__c}">
                    {!option.Name}
                </option>
            </aura:iteration>
        </lightning:select>
        <audio aura:id="audioclip" onended="{!c.onPlaybackEnded}" src="{!v.soundUrl}" />
        <div aura:id="message" class="slds-hide message">
            {! v.message }
        </div>
    </div>
</aura:component>

 --- Controller ---
({
     handleClick : function(component, event, helper) {
       
        helper.buttonDown(component,helper);
     },
    playSound: function(component) {
        var domElem = component.find('audioclip').getElement();
        domElem.src = component.get('v.soundUrl');
        domElem.play();
       
    },
    buttonDown: function(component,helper) {
        var msgElem = component.find('message');
        $A.util.removeClass(msgElem,'slds-hide');
        helper.playSound(component);
    },
    buttonUp: function(component,helper) {
        var msgElem = component.find('message');
        $A.util.addClass(msgElem,'slds-hide');
    },
    callServer : function(component,method,callback,params) {
        var action = component.get(method);
        if (params) {
            action.setParams(params);
        }
        action.setCallback(this,function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                // pass returned value to callback function
                callback.call(this,response.getReturnValue());  
            } else if (state === "ERROR") {
                // generic error handler
                var errors = response.getError();
                if (errors) {
                    console.log("Errors", errors);
                    if (errors[0] && errors[0].message) {
                        throw new Error("Error" + errors[0].message);
                    }
                } else {
                    throw new Error("Unknown Error");
                }
            }
        });
            $A.enqueueAction(action);
    },
    doInit: function(component, event, helper) {
        var defaultSound = component.get('v.sound');
        var baseUrl = $A.get('$Resource.PanicButtonAssets');
        var opts = [
            {
                Name: "Sad Trombone",
                fileUrl: baseUrl + "/PanicButton/SadTrombone.mp3"
            },
            {
                Name: "Explosion",
                fileUrl: baseUrl + "/PanicButton/Explosion.mp3"           
            }
            ];
               component.set("v.soundOptions", opts);
        for (var i=0; i <opts.length; i++) {
            if (opts[i].Name == defaultSound) {
                component.set(
                'v.soundUrl',
                opts[i].fileUrl
                );
                break;
            }
        }
        }
})

--- Helper ---
({
    playSound: function(component) {
        var domElem = component.find('audioclip').getElement();
        domElem.src = component.get('v.soundUrl');
        domElem.play();
    },
    buttonDown: function(component,helper) {
        var msgElem = component.find('message');
        $A.util.removeClass(msgElem,'slds-hide');
        helper.playSound(component);
    },
    buttonUp: function(component,helper) {
        var msgElem = component.find('message');
        $A.util.addClass(msgElem,'slds-hide');
    },
    callServer : function(component,method,callback,params) {
        var action = component.get(method);
        if (params) {
            action.setParams(params);
        }
        action.setCallback(this,function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                // pass returned value to callback function
                callback.call(this,response.getReturnValue());  
            } else if (state === "ERROR") {
                // generic error handler
                var errors = response.getError();
                if (errors) {
                    console.log("Errors", errors);
                    if (errors[0] && errors[0].message) {
                        throw new Error("Error" + errors[0].message);
                    }
                } else {
                    throw new Error("Unknown Error");
                }
            }
        });
        $A.enqueueAction(action);
    }
})