Play Media as DataUrl


#1

So I have a string of data that I got from a MIDI file (sample is “data:audio/mid;base64,…”). And I wanna be able to play this data URL. How can I do so without creating a file?


#2

Have you tried the HTML5 <audio> element?


#3

Can it Ben dynamic? I have a lot of midi files


#4

I would assume you could bind [src] the same way one does for <img>.


#5

Not working sadly. Tried it with this:

<audio controls="controls" preload="auto">
    <source src="data:audio/midi;base64,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"
            type="audio/midi" />    
</audio>

#6

Generally I believe data URLs are blocked for security purposes. Try using DomSanitizer and [src]="saniurl".


#7

Still no good. Player is still disabled.

my html:
<audio controls="controls" preload="auto">
    <source [src]="safeMidi" type="audio/midi" />    
</audio>

my ts

  midi: string = 'data:audio/midi;base64,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';

  safeMidi: SafeResourceUrl

    constructor (private domSanitizer: DomSanitizer){ 
        this.safeMidi = this.domSanitizer.bypassSecurityTrustResourceUrl(this.midi);
    }

#8

Have you tried with ordinary URLs as opposed to resource URLs?