f = open('path/of/mp3/file', 'rb')

response = HttpResponse()

response.write(f.read())

response['Content-Type'] = 'audio/mp3'

response['Content-Length'] = os.path.getsize('path/of/mp3/file')

return response

data: '��D�\x00\x11C\x19�\x01F(\x00\x00\x04 �&N�""""���ޓ�������\x7F���B\x10���w�����…���_�F��1B��H���\x16LAME3.100�����������������������' # and so on

const el = document.createElement('audio');

el.src = `${API_URL}/file.mp3`;

el.play();

new Audio(`${API_URL}/file.mp3`).play();

const context = new AudioContext();

axios

  .get(`${API_URL}/file.mp3`, {

    responseType: 'arraybuffer'

  })

  .then(res => {

    context.decodeAudioData(res.data).then(buffer => {

      const source = context.createBufferSource();

      source.buffer = buffer;

      source.connect(context.destination);

      source.start();

    });

  });

const context = new AudioContext();

fetch(`${API_URL}/file.mp3`).then(res => {

  res.arrayBuffer().then(arrayBuffer => {

    context.decodeAudioData(arrayBuffer).then(buffer => {

      const source = context.createBufferSource();

      source.buffer = buffer;

      source.connect(context.destination);

      source.start();

    });

  });

});