Read file and download from django

i'm trying to read an audio file mp3 and download it using django and vuejs

my-backend code

@api_view(['GET'])
@permission_classes([permissions.IsAuthenticated])
def file_download(request, application_id, file_id):
    base_path = os.getenv('UPLOAD_PATH')
    file_name = str(file_id)
    file = default_storage.open(base_path + file_name)

    print(file)
    print(file.size)
    print(settings.MEDIA_ROOT)

    response = HttpResponse(content=file)
    response['Content-Type'] = 'audio/mp3'
    response['Content-Length'] = file.size
    return response

front-end code

ApplicationFileService.download(this.$route.params.applicationId, this.$route.params.fileId).then(
                async result => {
                    let blob = new Blob([result.data], { type: 'audio' })
                    console.log(blob.size);
                    this.$utils.downloadFileFromBlob(result.data, this.file.name)
                }
            )

download file function

downloadFileFromBlob (data, fileName) {
        const blob = new Blob([data])
        const url = window.URL.createObjectURL(blob)
        const anchor = document.createElement('a')
        anchor.href = url
        anchor.download = fileName
        anchor.click()
        window.URL.revokeObjectURL(url)
    }

I was able to download the file but it is not playable while the original file on server was fine. I check file size on server is 6270152 and it is correct but when i check the file received in front-end it is 10610168 in size.

I don't know why there is a big difference in file size the file received was wrong and not playable. Can anyone help?