You need to sign in to do that
Don't have an account?
Michael 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);
}
})
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);
}
})