使用javascript提供不同格式的音频文件

使用javascript提供不同格式的音频文件,javascript,html,html5-audio,Javascript,Html,Html5 Audio,我正在使用以下代码播放声音文件: var audio = new Audio(); audio.src = 'somePath/filename.ogg'; audio.volume = 10; audio.autoPlay = false; audio.preLoad = true; // ... audio.play(); 而且效果很好。然而,一些浏览器可能不支持ogg格式,所以我想添加mp3格式作为替代。但是,如何使用javascript实现这一点 作为参考,当您提供多种格式时,在纯HT

我正在使用以下代码播放声音文件:

var audio = new Audio();
audio.src = 'somePath/filename.ogg';
audio.volume = 10;
audio.autoPlay = false;
audio.preLoad = true;
// ...
audio.play();
而且效果很好。然而,一些浏览器可能不支持ogg格式,所以我想添加mp3格式作为替代。但是,如何使用javascript实现这一点

作为参考,当您提供多种格式时,在纯HTML5中是这样的:

<audio volume="10" preload="auto">
  <source src="filename.ogg" type="audio/ogg">
  <source src="filename.mp3" type="audio/mpeg">
</audio>

因此,基本上,我不需要设置
audio.src
而是需要向
audio
对象添加
元素。但是我该怎么做呢?在javascript中是否有类似于
new Source()
的东西需要我在这里使用,我可以通过某种方式添加到
音频中


附加问题:如果浏览器不支持任何提供的源代码格式,我是否可以执行一些自定义代码,比如向用户打印消息,说他们的浏览器很差劲?:)

也许不完全是您想要的,但是您可以通过domapi实现这一点

// Create audio instance with different source times by means of the DOM API
function createAudio(sourceData) {

  const audio = document.createElement('audio')
  // audio.preload = 'auto', Redundant as source children are dynamically created
  audio.volume = 10
  audio.style.display = 'none'

  // Iterate each sourceInfo of input sourceData array
  for(var sourceInfo of sourceData) {

    const source = document.createElement('source')
    source.src = sourceInfo.src
    source.type = sourceInfo.type

    // Append each source to audio instance
    audio.appendChild(source)
  }

  document.appendChild(audio)

  // Update, forgot this - thanks @Kaiido!
  audio.load()

  return audio
}

// Usage
createAudio([
  { src : 'filename.ogg', type : 'audio/ogg' },
  { src : 'filename.mp3', type : 'audio/mpeg' },
])

如果浏览器与视频标签一样旧,则可以使用“您的浏览器不支持音频元素”。只需在sources
newaudio(src)
is Just
Object.assign(document.createElement('Audio'),{src:src,autoplay:true}下添加一行即可。所以不,没有源构造函数,但是基本的DOM方法就可以了。谢谢,@kaido。我认为
Audio
“object”背后还有一些魔力。对于不支持任何源代码时的检测,这里已经介绍了:缺少一点:您需要调用MediaElement#load,以便它尝试解析其内部源代码。如果您执行显式的
Audio.load()
调用,这是否意味着预加载对具有多个源的音频不起作用?@user2015253不适用于由脚本生成的音频(或者您可能会在文档中附加它),但最好自己调用它。@user2015253有必要显式调用
load()
,因为
子元素是动态指定的。因此从技术上讲,
preload=auto
是冗余的here@user2015253即使是MDN(这比W3School更可靠,因为它是由一个社区维护的,尽管它的名字叫crew,但所有供应商都是crew)也没有自己的页面来支持这种方法。你可以在上找到摘录。但它的基本功能是触发,这与preload=auto基本相同。注意,这就是调用“资源选择算法”的算法。