使用javascript获取原始音频文件的持续时间

Question

我有一个像这样的原始音频文件：

const rawAudio = data:audio/webm;codecs=opus;base64,GkXfo59ChoEBQveBAULygQRC84EIQoKEd2VibUKHgQRChYECGFOAZwH/////////FUmpZpkq17GDD0JATYCGQ2hyb21lV0GGQ2hyb21lFlSua7+uvdeBAXPFh+Wa3g0oH66DgQKGhkFfT1BVU2Oik09wdXNIZWFkAQEAAIC7AAA

我想获取这个音频文件的持续时间。

这是我尝试过的：

const onDrop = (file) => {
  const audio = document.createElement("audio")
  audio.setAttribute("src", URL.createObjectURL(file))
  audio.setAttribute("crossorigin", "anonymous")

  console.log(audio) // 

  audio.addEventListener("loadedmetadata", () => {
    console.log("loadedmetadata")
    const duration = audio.duration
    console.log(duration)
  })
}

var binaryData = []
binaryData.push(Card.audios.explain[0])

onDrop(new Blob(binaryData))

但是

loadedmetadata

永远不会点火！！

你会怎么做？

Answer 1

您的浏览器似乎不支持您的

rawAudio

。

我制作了这个片段来显示这个问题：

function newAudioElement ( myURL )
{
  const myAudioElement = document.createElement('audio');
  {
    myAudioElement.setAttribute('src', myURL);
    myAudioElement.setAttribute('crossorigin', 'anonymous');
  }
  
  // You can add as many event handlers as needed.
  {
    myAudioElement.addEventListener
    (
      'error', myEvent =>
      {
        console.log('Error:', { URL: myURL, ERROR: myEvent.target.error.message });
      }
    );
    
    myAudioElement.addEventListener
    (
      'durationchange', myEvent =>
      {
        console.log('Audio:', { URL: myURL, DURATION: myEvent.target.duration });
      }
    );
  }
  
  return myAudioElement;
}

// Your given audio.
const givenAudio = "data:audio/webm;codecs=opus;base64,GkXfo59ChoEBQveBAULygQRC84EIQoKEd2VibUKHgQRChYECGFOAZwH/////////FUmpZpkq17GDD0JATYCGQ2hyb21lV0GGQ2hyb21lFlSua7+uvdeBAXPFh+Wa3g0oH66DgQKGhkFfT1BVU2Oik09wdXNIZWFkAQEAAIC7AAA";

// A valid audio.
const someValidAudio = "https://cdn.freesound.org/previews/349/349483_827719-lq.ogg";

// TESTS

const newAudio1 = newAudioElement(givenAudio);
const newAudio2 = newAudioElement(someValidAudio);

console.log('Audios:', { newAudio1, newAudio2 });
console.log('Wait for your browser to fetch the audios...');

.as-console-wrapper
{
  min-height: 100%;
}