我想知道聲音何時真正從用戶揚聲器中發出，如果這有任何意義。
我有以下內容：
const stream = new Audio("https://stream1.srvnetplus.com:18122/stream");
const loading = false;
async function play() {
loading = true;
// stream.play() returns a Promise<void>
await stream.play();
loading = false;
}
loading 設定為 false，但由于某種原因，在某些情況下，實際聲音會在 1 到 2 秒后從我的揚聲器中發出。
這個反應庫（react-audio-player）有一個名為onCanPlay. 根據檔案狀態：
| 事件 | 型別 | 描述 |
|---|---|---|
| onCanPlay | 功能 | 當下載足夠的檔案以開始播放時呼叫。通過了活動。 |
這讓我覺得await inawait stream.play();不足以知道何時播放實際音頻。如我錯了請糾正我。
我想要一個看起來像這樣的解決方案：
const stream = new Audio("https://stream1.srvnetplus.com:18122/stream");
const loading = false;
async function play() {
loading = true;
const res = await stream.play();
await res.ready();
loading = false;
}
uj5u.com熱心網友回復：
用howler.js解決了我的問題
import { Howl } from "howler";
const streamUrl = "https://stream1.srvnetplus.com:18122/stream";
const stream = new Howl({
src: [streamUrl],
html5: true,
preload: true,
});
const loading = false;
function play() {
loading = true;
stream.play();
stream.on("play", () => {
loading = false;
});
}
uj5u.com熱心網友回復：
所有<audio>事件都可以記錄下來并顯示在下面的示例中。該playing事件在音頻播放開始后觸發。
function initPlayback() {
const audio = document.querySelector('audio')
event.target.remove() // remove <button>
audio.hidden = false;
// log all events of <audio>
['audioprocess', 'canplay', 'canplaythrough', 'complete', 'durationchange',
'emptied', 'ended', 'loadeddata', 'loadedmetadata', 'pause', 'play',
'playing', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend',
'timeupdate', 'volumechange', 'waiting']
.forEach(name => audio.addEventListener(name, event => {
console.log(name)
}))
audio.src = 'https://stream1.srvnetplus.com:18122/stream'
audio.play()
}<audio controls hidden></audio>
<button onclick="initPlayback()" style="padding: 1em 2em;">Play</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/414868.html
標籤：