Создание параметра «тип» для HTML5 <audio>программно с помощью Javascript

Question

В настоящее время я создаю аудио элемент с помощью JS, например:

var newAE = document.createElement('audio');
    newAE.id = "ios-audio";
    newAE.src = obj.media;
document.getElementById('ios').appendChild(newAE);

Это здорово, но мне нужно также программно установить type на основе содержимого входящего obj.mediaзначение.

type="audio/mpeg"
type="audio/ogg"

Я думал, что это будет работать:

var enctype = 'audio/mpeg';

if (obj.media == "https://example.com/myaudiofile.ogg") {
  enctype = 'audio/ogg';
}

var newAE = document.createElement('audio');
  newAE.id = "ios-audio";
  newAE.src = obj.media;
  newAE.type = enctype;
document.getElementById('ios').appendChild(newAE);

Но это не создает параметр type вообще.Я все еще в конечном итоге с этим в DOM:

<audio id="ios-audio" src="https://example.com/myaudiofile.mp3"></audio>

Когда желаемый результат в этом случае будет:

<audio id="ios-audio" src="https://example.com/myaudiofile.mp3" type="audio/mpeg"></audio>

Я думаю, что я делаю это неправильно, поэтому кто-то может указатьменя в правильном направлении, пожалуйста?

Пример ниже (без переключателя mp3 / ogg, поскольку это не имеет значения)

function create(media) {

  var enctype = "audio/mpeg";
  
  var newAE = document.createElement('audio');
      newAE.id = "ios-audio";
      newAE.src = media;
      newAE.type = enctype;
  document.getElementById('ios').appendChild(newAE);

  var player = document.getElementById('ios-audio');
  setTimeout(function() {
    player.play();
    console.log("playing");
    console.log(player);
  }, 50);
}

create('https://ia800508.us.archive.org/15/items/LoveThemeFromTheGodfather/02LoveThemeFromTheGodfather.mp3');

<div id="ios"></div>

Answer 1

<source> и [type]

Я считаю, что атрибут [type] принадлежит тегу <source> .Тег <audio> может иметь только один атрибут [src], и когда требуется более одного тега, теги <source> добавляются для каждого [src].Атрибут [type] необходим для обозначения MIME для нескольких [src].

---

Demo

, если демонстрация не работает на SO,Просмотрите эту демонстрацию функционирования на Plunker

var aTag = document.createElement('audio');
aTag.id = 'a0';
aTag.controls = true;

var sMP3 = document.createElement('source');
sMP3.src = 'https://instaud.io/_/2JCu.mp3';
sMP3.type = 'audio/mpeg';

var sOGG = document.createElement('source');
sOGG.src = 'https://instaud.io/_/2Mxg.ogg';
sOGG.type = 'audio/ogg';

aTag.appendChild(sMP3);
aTag.appendChild(sOGG);

document.querySelector('.dock').appendChild(aTag);

<fieldset class='dock'>
  <legend>Audio and Source Tags</legend>
</fieldset>

---