当前位置:首页 > 前端 > 正文内容

使用js给网页添加提示音或播放音效

小木2年前 (2023-04-30)前端35540

有些时候需要给用户一个提示音,用来做站内信提醒,或者交互提醒之类的功能
这时就可以使用js向页面插入音效播放 👇

// 在需要执行提示音的地方添加下列代码
let mp3 = new Audio('./error.mp3')
mp3.loop = false
mp3.play()

Audio 的方法 👇

方法 功能
addTextTrack() 向音频添加新的文本轨道。
canPlayType() 检查浏览器是否能够播放指定的音频类型。
fastSeek() 在音频播放器中指定播放时间。
getStartDate() 返回新的 Date 对象,表示当前时间线偏移量。
load() 重新加载音频元素。
play() 开始播放音频。
pause() 暂停当前播放的音频。

Audio 的常用属性 👇

属性 功能
autoplay 设置或返回音频是否应在加载后立即开始播放。
controls 设置或返回音频是否应显示标准音频控件。
loop 设置或返回音频是否应在结束时再次播放。
muted 设置或返回是否关闭声音。
paused 设置或返回音频是否暂停。
src 设置或返回音频的 src 属性的值。
volume 设置或返回音频的音量。

Audio 的其他属性 👇

属性 功能
audioTracks 返回表示可用音频轨道的 AudioTrackList 对象。
buffered 返回表示音频已缓冲部分的 TimeRanges 对象。
controller 返回表示音频当前媒体控制器的 MediaController 对象。
crossOrigin 设置或返回音频的 CORS 设置。
currentSrc 返回当前音频的 URL。
currentTime 设置或返回音频中的当前播放位置(以秒计)。
defaultMuted 设置或返回音频默认是否静音。
defaultPlaybackRate 设置或返回音频的默认播放速度。
duration 返回音频的长度(以秒计)。
ended 返回音频的播放是否已结束。
error 返回表示音频错误状态的 MediaError 对象。
mediaGroup 设置或返回音频所属媒介组合的名称。
networkState 返回音频的当前网络状态。
playbackRate 设置或返回音频播放的速度。
played 返回表示音频已播放部分的 TimeRanges 对象。
preload 设置或返回音频的 preload 属性的值。
readyState 返回音频当前的就绪状态。
seekable 返回表示音频可寻址部分的 TimeRanges 对象。
seeking 返回用户当前是否正在音频中进行查找。
textTracks 返回表示可用文本轨道的 TextTrackList 对象。

扫描二维码推送至手机访问。

版权声明:本文由小木发布,如需转载请注明出处。

本文链接:https://xiaomu.site/post/5.html

标签: htmljsaudio
分享给朋友:

“使用js给网页添加提示音或播放音效” 的相关文章

vue el-dialog 内的tinymce弹窗被遮挡的解决办法

vue el-dialog 内的tinymce弹窗被遮挡的解决办法

问题一: 在el-dialog中使用tinymce富文本时, 点击富文本的功能按钮, tinymce的弹出层的层级过低, 导致被el-dialog盖住了弹窗. 解决: 在F12中找到控制tinymce弹窗层级的样式 直接修改样式没有生效, 加穿透也没生效, 最后发现是因为加了 scop...