诚实的码农 2018-08-09 13:48 采纳率: 100%
浏览 11006
已采纳

如何实现js事件触发播放音频

就像一般网站的提示音一样,当单机按钮事件触发时,调用的函数中需要播放一个音频,很小的,就像提示音,如何实现?能用jQuery写最好
举个例子:

网页:

 <body>
<button type="button" onclick="play();">
</body>

js:
function play(){
//如何在这里实现播放一个mp3音频???
......
}

  • 写回答

8条回答 默认 最新

  • 天际的海浪 2018-08-09 14:15
    关注
    <audio id="audio" src="http://www.w3school.com.cn/i/song.ogg"></audio>

<button type="button" onclick="play();">播放</button>

<script type="text/javascript">
function play(){
    document.getElementById("audio").play();
}
</script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(7条)

报告相同问题？

  • html5触发式音频播放 html5触发式音频播放网页特效.zip
    2022-11-18 22:13
    这可以通过在JavaScript中监听相应的DOM事件，然后调用音频元素的方法实现。 6. **响应式设计**: 在创建网页特效时，确保音频播放功能在不同设备和屏幕尺寸上都能正常工作至关重要。可以利用CSS的媒体查询（media ...
  • 前端实现页面自动播放音频方法
    2023-06-26 14:33
    jingqw的博客 尽管自动播放媒体文件是一个很实用的功能，但是我们也应该谨慎地使用它，保证只有在它被需要的时候才使用。在这篇文章中，我们将介绍各种媒体和。，而是使用play函数进行播放，play函数执行时会返回一个promise，...
  • HTML5 前端音频播放的控制技巧
    2025-05-16 16:16
    AI架构全栈开发实战笔记的博客 本文旨在为前端开发者提供全面的HTML5音频控制技术指南，涵盖从基础到高级的多种音频处理技术。HTML5 Audio元素的高级用法Web Audio API的核心功能音频可视化技术实现跨浏览器兼容性解决方案性能优化最佳实践首先...
  • JavaScript实现带播放列表的音乐播放器实例分享
    2020-10-22 18:07
    用户可以通过控制按钮来实现播放器的播放、暂停、停止和切换歌曲等操作，这些操作都是通过JavaScript函数响应用户点击事件来完成的。 从以上知识点可以看出，文档提供了从基本的HTML5音频播放，到JavaScript实现的...
  • 基于JavaScript实现简单的音频播放功能
    2020-11-30 04:28
    2. **JavaScript事件处理**: 为了实现音频播放功能，我们需要监听音频元素的事件，例如`play`、`pause`和`ended`。这里使用jQuery库来简化DOM操作和事件绑定。例如，`$("#audio-player").on('play', function() {......
  • vue通过点击事件读取音频文件的方法
    2020-08-27 10:14
    其次，在 JavaScript 代码中定义音频文件的数组和当前选中的音频文件名称。最后，在点击事件的处理方法中，使用 `new Audio()` 构造函数来创建音频对象，并播放音频文件。 希望本文能够对大家有所帮助，如果大家有...
  • 【vue】 实现浏览器自动播放音频的指南
    2025-04-25 08:56
    托尼比卡丘的博客 用户交互优先：通过用户点击按钮等交互方式触发音频播放，是确保音频能够顺利播放的最佳方法。渐进式增强：如果需要在页面加载时自动播放音频，可以先尝试播放，并在失败时提示用户。但这并不总是可靠的。静音自动...
  • vue 不触发自动播放音频
    2025-11-10 17:49
    顺风顺水Q小Q的博客 src="音频.mp3
  • js纯前端实现腾讯cos文件上传功能的示例代码
    2020-11-26 16:02
    本文将详细讲解如何使用JavaScript SDK实现在纯前端实现腾讯COS的文件上传功能。 首先，为了实现文件上传，我们需要安装腾讯云COS的JavaScript SDK。这可以通过下载`cos-js-sdk-v5.min.js`文件并将它引入到HTML页面...
  • js实现点击音频实现播放功能
    2024-01-09 08:40
    雷霆半月斩掉你的板砖的博客 【代码】js实现点击音频实现播放功能。
  • 没有解决我的问题, 去提问