Files are played using blob

Demand Background:

Blobs are used when the binary data types returned in the background are missing, and when we do not know the data types

What is a blob

Reference juejin. Cn/post / 684490…

Audio playback conversion

	/** * desc: base64 to blob file *@param Base64: Base64 object * for data@param FileType: indicates the fileType, such as mp3. *@returns {Blob}: Blob file object */
    base64ToBlob(base64, fileType) {
      // Verify that there is already a type, if not, then cast, if there is, do not care
      let splitArr = base64.split(', ');
      let matchArray = splitArr[0].match(/ : (. *?) ; /);/ / get data: fileType. In the base64 fileType
      if (matchArray[1] = ="") {// If it doesn't exist
        let typeHeader = 'data:audio/' + fileType + '; base64,'; // Define the base64 header file type
        let audioSrc = typeHeader + splitArr[1]; // Splice the final base64
        let arr = audioSrc.split(', ');
        let array = arr[0].match(/ : (. *?) ; /);
        let mime = (array && array.length > 1 ? array[1] : type) || type;
        // Remove the url header and convert it to byte
        let bytes = atob(arr[1])
        // Handle exceptions to convert ASCII codes less than 0 to greater than 0
        let ab = new ArrayBuffer(bytes.length);
        // Generate view (directly for memory) : 8-bit unsigned integer, length 1 byte
        let ia = new Uint8Array(ab);
        for (let i = 0; i < bytes.length; i++) {
          ia[i] = bytes.charCodeAt(i);
        }
        let temp = new Blob([ab], {
          type: mime
        });
        fileName = window.URL.createObjectURL(temp);
      }else{ fileName = base64; }}Copy the code

The garbage collection

There is a paragraph earlier in what is a BLOB:

Note that every time the url.createObjecturl method is called, you get a different Blob URL, even with the same binary data. This URL lasts as long as the web page does, and the Blob URL is invalidated once the page is refreshed or uninstalled.

RevokeObjectURL (objectURL) frees URL objects. When you’re done with a URL object, you should call this method to let the browser know that you don’t need to keep references to the file in memory, allowing the platform to do garbage collection when appropriate.

So we need to do garbage removal when appropriate

window.URL.revokeObjectURL(fileName);
Copy the code