Web 音频 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> 

我真的需要通过

标签来做到这一点，因为我围绕它建立了一个完整的播放列表。请帮忙。我在控制台中不断收到此错误消息：

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>