我正在寻找一种在单击按钮后立即播放 html5 音频的方法。现在,它确实有效;但不是很可靠。
我的文件是托管在 AWS Cloudfront 上的 300Kb MP3 (128Kbps)。
<audio id="i-audio" src="https://cdn/url/to/i-audio.mp3" preload="auto" type="audio/mp3"></audio>
this.iAudio = document.getElementById('i-audio');
$("#button").on('click', function() {
this.iAuido.play();
});
我了解到 play()
会返回一个 promise;而且我不确定如何确定音频一直在播放;可靠地。
现在,该播放会随机运行或只是抛出一个错误。
最佳答案
如果您收到有关 Promises 和 .play()
的错误消息,你需要治疗 .play()
作为 promise ,请参阅此 article .
我没有看到任何
button#button
所以我假设这只是一个打字错误。this
没有上下文,所以它会引用window
(很没用)this.iAudio = document.getElementById('i-audio');
应该声明一个变量(如
var iAudio = ...
或const iAudio = ...
)。this
具有监听点击事件的元素上下文$("#button").on('click', function() { this.iAuido.play(); });
无法想象这段代码会随机运行,当我阅读下一行时它会变得更糟。让我们假设
iAudio
是正确的并引用了<audio>
标签,但出于某种原因this
以它为前缀(wHy?!?)。this
会引用按钮,所以一行代码的每一段都是错误的。
const playback = (e) => {
const mp3 = $('.mp3')[0];
let action = mp3.paused || mp3.ended ? mp3.play() : mp3.pause();
return action;
}
playback().then(() => console.log('Promise Resolved')).catch(error => $('.btn').on('click', playback));
button {
font-size: 5rem;
color: cyan;
border: 0;
background: none;
cursor: pointer
}
button:focus {
outline: none
}
button:hover {
color: tomato;
}
<audio class="mp3" src="https://glsbx.s3.amazonaws.com/-/dd.mp3" preload="auto"></audio>
<button class='btn' type='button'>▶</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
关于javascript - 单击按钮播放/暂停音频没有延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57072750/