当 HTML5 <audio> 开始播放时显示图像

Posted 2023-02-25

【中文标题】当 HTML5 <audio> 开始播放时显示图像

【英文标题】：Show an image when HTML5 <audio> starts to play

【发布时间】：2012-12-21 11:35:09

【问题描述】：

我的网站有背景音乐和单张图片。我希望在音乐开始之前隐藏图像，甚至可能在音频开始自动播放之前有某种加载消息。 请帮帮我:)

【参考方案1】：

查看this answer 中的脚本。 显然，您必须更改附加到“canplaythrough”的功能以满足您的需求，例如添加类似：

$("#imageID").css("display", "block");

【参考方案2】：

通过 CSS 隐藏的第一组图像。

您需要监听 javascript 事件 <audio> 元素正在触发：

https://developer.mozilla.org/en-US/docs/DOM/Media_events

然后在 Javascript 代码中，捕获您想要尊重的事件并动态地使图像可见 在事件处理程序中使用 jQuery.show 或类似的 DOM 元素样式操作：

http://api.jquery.com/show/