So aktivieren Sie Autoplay für dynamisch hinzugefügte Audio -Tag ⇐ JavaScript

[Anonymous]

Ich arbeite an der Live -Klasse. Immer wenn ein Benutzer das Mikrofon leistet, erhalten alle Teilnehmer den Audiostrom. Aber Audio kann aufgrund der Autoplay -Richtlinie nicht spielen. Es funktioniert gut im Desktop -Browser, jedoch nicht auf iOS -Chrome. Unten ist mein Code, aber es konnte das globale Autoplay nicht aktiviert werden. < /P>
export class LiveclassComponent {
private audioUnlocked: boolean = false;

private checkAudioContextState(): boolean {
try {
const tempContext = new (window.AudioContext || (window as any).webkitAudioContext)();
const isUnlocked = tempContext.state === 'running';
tempContext.close();
return isUnlocked;
} catch {
return false;
}
}

private unlockAudioGlobally(): Promise {
return new Promise((resolve) => {
try {
const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();

if (audioContext.state === 'suspended') {
audioContext.resume().then(() => {
this.audioUnlocked = true;
console.log('Audio context unlocked globally');

this.playAllHiddenAudio();

this.removeAllPlaybackButtons();

audioContext.close();
resolve();
}).catch((err) => {
console.error('Failed to unlock audio context:', err);
resolve();
});
} else {
this.audioUnlocked = true;
this.playAllHiddenAudio();
this.removeAllPlaybackButtons();
resolve();
}
} catch (err) {
console.error('Audio context not supported:', err);
this.audioUnlocked = true;
this.playAllHiddenAudio();
this.removeAllPlaybackButtons();
resolve();
}
});
}

private removeAllPlaybackButtons(): void {
document.querySelectorAll('.audio-unlock-btn').forEach(btn => btn.remove());
}

private playAllHiddenAudio(): void {
document.querySelectorAll('audio[style*="display: none"], audio[data-waiting-unlock="true"]').forEach((a) => {
let audio = a as HTMLAudioElement;
audio.style.display = "block";
audio.removeAttribute('data-waiting-unlock');
audio.play().catch(err => {
console.warn("Still can't play audio after unlock:", err);
});
});
}

addStream(userId:string , consumerId: string, stream: MediaStream, kind: string, mediaType:string) {
let consumerType = mediaType === "screen"? "active-speaker" : "";
let participantContainer: HTMLDivElement = document.getElementById(userId) as HTMLDivElement;
let innerContainer = participantContainer.querySelector(".inner-container");
if (kind != "audio") {
let elem;
elem = document.createElement('video');
elem.srcObject = stream;
elem.id = consumerId;
elem.autoplay = true;
elem.muted = true;
elem.playsInline = true;
elem.className = "participant-video "+consumerType;
innerContainer?.appendChild(elem)
}
else {
let elem: HTMLAudioElement;
elem = document.createElement('audio');
elem.srcObject = stream;
elem.id = consumerId;
elem.autoplay = true;
elem.controls = true;
elem.className = "participant-audio "+consumerType;
innerContainer?.appendChild(elem)
let audioIndicator = participantContainer.querySelector(".speaker-indicator.inactive")
audioIndicator?.classList.remove("inactive")
audioIndicator?.classList.add("active")

console.log("Audio unlocked state:", this.audioUnlocked);
console.log("Audio context state:", this.checkAudioContextState());

const isAudioUnlocked = this.audioUnlocked && this.checkAudioContextState();

if (isAudioUnlocked) {
elem.play().catch(err => {
console.warn("Failed to play audio even though unlocked:", err);
elem.setAttribute('data-waiting-unlock', 'true');
});
} else {
elem.play().then(() => {
this.audioUnlocked = true;
console.log("Audio played successfully, updating unlock state");
}).catch(err => {
console.warn("Audio play blocked, showing unlock button:", err);

elem.style.display = "none";
elem.setAttribute('data-waiting-unlock', 'true');

let existingButton = document.querySelector('.audio-unlock-btn');
if (!existingButton) {
let playbackButton = document.createElement("button");
playbackButton.innerText = " Enable Audio for All Users";
playbackButton.classList.add("auks-btn", "audio-unlock-btn");
playbackButton.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
background: #4CAF50;
color: white;
border: none;
padding: 12px 20px;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
`;

document.body.appendChild(playbackButton);

playbackButton.addEventListener("click", async () => {
console.log("Unlocking audio globally...");
await this.unlockAudioGlobally();
});
}
});
}
}
}
}
< /code>
Jedes Audio erzeugt nach Aktivierung der Wiedergabe, die die Benutzer frustrieren. Jede Hilfe, wie man dies löst.