【问题标题】：Creating "type" parameter for HTML5 <audio> programmatically with Javascript使用 Javascript 以编程方式为 HTML5 <audio> 创建“类型”参数
【发布时间】：2018-10-09 22:21:02
【问题描述】：

我目前正在用这样的 JS 创建一个音频元素：

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

这很好，但我还需要根据传入的 obj.media 值的内容以编程方式设置 type。

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');

&lt;div id="ios"&gt;&lt;/div&gt;

【问题讨论】：

音频无法播放？因为如果它只是关于它在 DOM 中的外观，只要底层元素的属性没问题，它就无关紧要。否则，请使用 innerHTML 准确设置您想要的 HTML。见stackoverflow.com/q/37735208/215552
它可以正常播放 mp3 文件，但是当它获得 OGG 文件时，它会播放大约 30 秒，然后在 iOS Safari 上停止。我认为 Safari 的问题是缺少类型？
浏览器中的@RobG 开发工具
使用newAE.setAttribute('type', enctype)，但这可能无法解决播放问题。
@spice RobG 提到 <audio> 标签上的“类型”可能无法解决您的问题。他是对的，在<audio> 标签上没用，它属于<source> 标签。如果您使用<source> 标记并将type 添加到它，您的值应该是type="audio/aac" 查看我的答案。

标签： javascript html audio

【解决方案1】：

`<source>` 和 `[type]`

我相信[type] attribute belongs to the <source> tag。一个<audio> 标签只能有一个[src] 属性，当需要多个属性时，为每个[src] 添加<source> 标签。需要[type] 属性来为多个[src] 指定MIME。

演示

如果演示无法在 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>

【讨论】：

demo 在 SO 上不起作用 是什么意思？ plnkr 与此 Q/A 有什么关系？

&lt;source&gt; 和 [type]

演示

`<source>` 和 `[type]`