Предложить аудио файл в разных форматах с помощью JavaScript - PullRequest
Новая
       7

Предложить аудио файл в разных форматах с помощью JavaScript

0 голосов
/ 12 сентября 2018

Я использую следующий код для воспроизведения звукового файла: 

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 Мне нужно будет добавить <source> элементов к объекту Audio.Как мне это сделать, хотя?Есть ли что-то похожее на new Source() вещь в javascript, которую мне нужно использовать здесь, которую я могу каким-то образом добавить к audio?

Дополнительный вопрос: если браузер не поддерживает ни один из предложенных исходных форматов, могу ли я как-товыполнить некоторый пользовательский код, например, напечатать сообщение пользователю, говоря, что его браузер отстой?:)

1 Ответ

0 голосов
/ 12 сентября 2018

Возможно, не совсем то, что вы имели в виду, однако вы могли бы добиться этого с помощью DOM API? 

// 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' },
])
...