网络音频 API 从列表项标签创建音频上下文

Question

有人可以帮我解决这个问题吗？如何正确连接音频上下文中的列表项？这可能真的很简单，但我找不到解决方法。

我有这样的东西：

window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;

window.onload = function() {

    var canvas = document.getElementById("canvas");
    var audio = document.getElementById("audio");
    var context= new AudioContext();
    var analyser = context.createAnalyser();
    var audioSrc = context.createMediaElementSource(audio);

HTML

<li id="audio" audioURL="https://...s3.amazonaws.com/media/Track_1.mp3" artist="A1"> Track 1</li>

只有当我这样传递它时它才有效:

<audio crossOrigin="anonymous" src="https://..s3.amazonaws.com/media/Track_1.mp3" id="audio" controls>
</audio>

我真的需要用 < li > 标签来做，因为我围绕它构建了一个完整的播放列表。请帮忙。我不断在控制台中收到此错误消息：

Uncaught TypeError: Failed to execute 'createMediaElementSource' on 'AudioContext': parameter 1 is not of type 'HTMLMediaElement'.

Answer 1

可能您将 li html 元素作为源传递，但它必须是一个元素。没有代码示例，很难提供帮助。我相信你可以使用下面的代码实现你的目标。

const audioEl = document.getElementById("audio")

function play (event){
  const audioURL = event.target.attributes.audioUrl.value;
  audioEl.src = audioURL
  audioEl.play();
}

<ul>
  <li onClick="play(event)" audioUrl="https://www.w3schools.com/tags/horse.ogg">Hourse</li>
  <li  onClick="play(event)" audioUrl="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3">Rex 1</li>
</ul>
<audio id="audio" controls></audio>

网络音频 API 从列表项标签创建音频上下文

Web Audio API create audiocontext from list item tag

html

web-audio-api