m4aデータをbase64で取得し再生するとUncaught (in promise) DOMExceptionが発生

Android版Edge(ver44.11.4.4122)のJavaScriptでm4aデータをbase64で取得した場合、再生しようとするとすると

> Uncaught (in promise) DOMException

が発生します。

下記がその場合のサンプルコードです。

const audio = new Audio();

const url = base64形式でm4aデータを返すスクリプト;

$.get(url, function(data) {

audio.src = "data:audio/x-m4a;base64," + data;

audio.play();

})

同じコードをWin10、macOSのEdge(ver79.0.309.68)、iOSのEdge(ver44.11.15)で実行する場合はこの問題は発生しません。

またWin10、macOS、iOS、AndroidのChrome、Firefox、Safari(macOS、iOSのみ)でも問題は発生しません。

■調査した全環境

Win10 - Edge、Chrome、Firefox

macOS - Edge、Chrome、Firefox、Safari

Android(ver9) - Edge、Chrome、Firefox

iOS - Edge、Chrome、Firefox、Safari

(すべて2020年1月20日時点で最新版)

なお、m4aをそのままaudio.srcに設定するとAndroid版Edgeでも正常に再生されます。

const audio = new Audio();

audio.src =  m4aデータをそのまま返すスクリプト;

audio.play();

データをm4aでなくmp3にしbase64形式で読ませた場合はAndroidのEdgeも含め、調査した全環境で正常に再生されました。

そこで、audio.srcにbase64データを渡すのがまずいのかと思い、先にbase64で受けたデータをblobに変換しURL化してみたところ、同じ

> Uncaught (in promise) DOMException

が発生します。

これも、AndroidのEdghe以外の環境では問題なく再生されます。

function convertDataURIToBinary(dataURI) {

const BASE64_MARKER = ';base64,';

const base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;

const raw = atob(dataURI.substring(base64Index));

const rawLength = raw.length;

const array = new Uint8Array(new ArrayBuffer(rawLength));

for (let i = 0; i < rawLength; i++) {

array[i] = raw.charCodeAt(i);

}

return array;

}

const audio = new Audio();

const url = base64形式でm4aデータを返すスクリプト;

$.get(url, function(data) {

const src = "data:audio/x-m4a;base64," + data;

const binData = convertDataURIToBinary(src);

const blob = new Blob([binData], {type : 'audio/x-m4a'});

const blobUrl = URL.createObjectURL(blob);

audio.src = blobUrl;

audio.play();

})

以上から調査から AndroidのEdgeのみがBase64にエンコードしたm4aの再生ができないという結論に達しました。

なぜ、このようなことが起きるのかわかりません。解決策があればご教授願いたいです。

追伸)

サンプルコードにある "base64形式でm4aデータを返すスクリプト" が返すレスポンスヘッダは下記です。

> date: WW,DD MM YYYY HH:mm:ss GMT

> content-type: audio/x-m4a

> content-length: ******

> server: Apache/2.2.34

> cache-control: no-store

> pragma: no-cache

> access-control-allow-origin: *

> accept-ranges: bytes

> vary: User-Agent