We are trying to access/play audio files stored on external system from Salesforce Lightning Component. Access to file requires a BASIC authentication with GET method and we don't want users to prompt for username/password when they click on the audio file link (Stored as URL field on Salesforce custom object). We first tried redirecting the user to audio file but no luck. Second option we are trying is, aura component as below which takes Blob from apex controller but it's not working. Any help is greatly appreciated.

<audio src="{!v.audioFile} type="audio/x-wav"> 

js controller

    doInit : function(component, event, helper) {
        var recID = component.get("v.recordId");
        console.log("recordID "+recID);
        var action = component.get("c.makeCallout");
       action.setCallback(this, function(response) {
            console.log('get state'+response.getState());
            if (response.getState() == 'SUCCESS') {
               var templateData = response.getReturnValue();
                var byteCharacters = atob(templateData);
                const buf = new Array(byteCharacters.length);

                for (var i = 0; i != byteCharacters.length; ++i)
                buf[i] = byteCharacters.charCodeAt(i);
                const view = new Uint8Array(buf);
                //cast to blob
                const blob = new Blob([view], {
                type: 'audio/x-wav'
               var audio = new Audio(blob);
                component.set("v.audiofile", blob);
                component.set("v.callOutComplete", true);
  • Thanks for the reply. I have come across this link but however issue is <src> is only taking URL but in our case, we trying to make this work with actual content (blob) of the file without storing it on Salesforce. – srikanth pasupuleti Sep 22 '20 at 20:01
  • For the HTML <audio> tag: the src file doesn't have to be stored in Salesforce but it does have to be in a standard audio format. It seems like you're trying to solve the problem of access control by attempting to download the blob and send it to the client. That won't work, at least not the way you have it. Rethink your architecture along the lines of the other link referenced above. – identigral Sep 22 '20 at 20:14