如何通过 HTML 按钮播放声音

2024-05-21

我目前通过网站播放音乐的方法是通过 HTML 音频标签。不过我希望能够通过 HTML 按钮来播放它。该按钮应该能够在播放和停止之间切换音乐。我在 JSFiddle 创建了一个示例,但不知道如何实现它。有人可以告诉我如何使用我的 JSFiddle 示例来做到这一点吗?

JSFiddle: http://jsfiddle.net/jTh3v/332/ http://jsfiddle.net/jTh3v/332/

我原来的做法是:

document.getElementById("soundTag").innerHTML = "<audio controls volume preload='none' src='http://www.sousound.com/music/healing/healing_01.mp3'></audio>";

您可以通过 onclick 事件播放声音...在 html 上插入一个按钮。编写一个函数并将其作为 onclick 事件在您的按钮上调用。

function playMusic(){
  var music = new Audio('musicfile.mp3');
  music.play();
  }
<input type="button" value="sound" onclick="playMusic()" />

确保提供有效的文件名。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何通过 HTML 按钮播放声音 的相关文章

  • 从对象获取数据 - 我看到数据但无法保存它们

    正如你所看到的 我是新来的 我确实尝试过搜索 但没有找到解决我问题的方法 所以这是我的问题 如果我这样做 console log grid data kendoGrid data 这在控制台中显示如下 所以我明白这一点 有一个数组和一个带有
  • jquery 事件委托

    我正在尝试使用事件委托重写一段代码 希望它能停止与另一个 js 代码段发生冲突 但我已经破解了密码 原来的 to scale up on hover var current h null var current w null piccon
  • jQuery 时间戳之前的时间?

    下面是一个非常好的 jQuery 插件 与他们在 SO 上使用的插件非常相似 对我来说问题是它用它来转换时间
  • Facebook 登录无法在移动浏览器中使用

    我使用 react facebook login 在我的网站中实现了 facebook 登录module https github com keppelen react facebook login 我在 ComponentDidMount
  • 内容安全策略:页面设置阻止自行加载资源?

    我有基于 Java 的 Web 应用程序运行在Tomcat http en wikipedia org wiki Apache Tomcat6 我的应用程序在本地主机和端口 9001 上运行 为了使我的应用程序更加安全并降低风险XSS ht
  • React JS“this”没有按预期工作

    我有下面的代码 save function var this this console log this refs itemText this setState isEditing false function console log In
  • 它们是“相同的”吗?代码大战

    这是完整的问题描述 给定两个数组 a 和 b 编写一个函数 comp a b Clojure 中的 compSame a b 来检查这两个数组是否具有 相同 元素以及相同的重数 这里 相同 意味着 b 中的元素是 a 平方中的元素 无论顺序
  • 元素在主体内找不到足够的空间 - JavaScript 样式

    相关信息 该页面包含两个元素 An
  • jQuery 如何通过不同的列值计算表中的行数

    如何按表列计算不同的表行 Example table thead tr th NAME th th TECHNOLOGY th tr thead tbody tr td john td td jQuery td tr tr td mark
  • 单击时突出显示文本(javascript jquery html)

    当您在所有浏览器中双击某个单词时 它们会自动突出显示单击下的单词 但是否有可能找到一种方法exact单击一下就会发生同样的事情吗 我想这涉及到的事情可能是 TextRange 的东西 对所有段落 或整个正文或 div 的 onclick 做
  • D3 时间解析返回 null

    根据此页面上的说明 https github com mbostock d3 wiki Time Formatting https github com mbostock d3 wiki Time Formatting我正在尝试解析 ISO
  • bootstrap css中垂直对齐缩略图?

    我认为这应该很简单 但我就是无法让它发挥作用 在 ASP NET MVC 中 我有一个如下所示的项目列表 div class row div class span12 ul class thumbnails foreach var film
  • onClick 事件适用于触摸屏设备上的触摸吗?

    我用过onclick我的网站上的活动 但是 当我在谷歌浏览器的开发人员模式移动视图中打开它时 触摸使用鼠标单击的元素没有任何反应 所以我的问题是 我还必须添加吗ontouch事件连同onclick事件或 onClick 事件适用于所有触摸屏
  • Antd select 元素:如何禁用输入?

    我正在尝试使用模式 multiple 的选择元素 我希望禁用输入 这意味着用户只能在现有选项之间进行选择 而不能输入文本 我该怎么做呢 我的元素 import Select from antd import antd dist antd c
  • Android Mediaplayer:下载媒体文件的 setDataSource 问题

    我有一个可以录制和播放音频文件的应用程序 一些音频文件是使用 httpclient 使用简单的标准 http 下载来下载的 很长一段时间以来 它就像一种魅力 现在我突然无法播放我下载的文件 该堆栈失败 我将文件存储在 SDCard 上 并且
  • 在 Sublime Text 下获取完整的 JS 自动补全

    我刚刚在 Windows Vista 下安装了 Sublime Text 甚至遵循了中给出的建议这个帖子 https stackoverflow com questions 10636410 modifying sublime text 2
  • 隔离必需的字段验证器?

    我在页面上有两个搜索按钮 一个链接到下拉列表 另一个链接到带有文本框的下拉列表以获取更多搜索条件 我在所有上述控件上都需要现场验证器 当我从第一个下拉列表中选择某些内容并单击相应的搜索按钮时 文本框的字段验证器会触发 从而禁用第一个搜索按钮
  • Bootstrap - 为反向行模式创建移动自适应

    我想用 Bootstrap 创建一个反向效果 第一行 左边是文字 右边是图像 第二行 左边是图片 右边是文字 第三行 左边是文字 右边是图片 第四行 左边是图片 右边是文字 而且这种情况一直持续下去 它在大型设备上看起来非常漂亮 但当它在设
  • 保留对 React 状态变量的“引用”

    据我所知 Javascript 中没有指针 我有以下问题 但我想知道是否有一个解决方案让我无法解决 解决方案可能是普通的 Javascript 或者像 Context API 这样的 React js 钩子 useContext 或者更多
  • 调试客户端时使用 Chrome/Firefox

    我正在使用带有 getUserMedia 的相机 但出现了一些需要修复的错误 问题是 Visual Studio 只允许我使用 IE 调试 JavaScript 我的意思是命中断点 而 IE 不支持 getUserMedia 如果您想在 I

随机推荐

  • Sublime Text 插件开发中的全局 Python 包

    一 总结 我不知道 Sublime Text 插件开发人员如何使用 Sublime Text 查找全局 Python 包 而不是 Sublime Text 目录的 Python 包 Sublime Text使用自己的Python环境 而不是
  • ant-d upload中如何为removeFile添加PopConfirm一个图片文件

    我正在使用 Ant d Upload 通过本地系统上传文件 然后单击文件预览图像上的删除图标 图像文件将被删除 我想添加一个弹出确认 所以我尝试在 onRemovefunction 中添加确认作为承诺但它不起作用 它在浏览器中显示警报 on
  • android:进程和进程名称

    我试图理解android process属性 Ref says http developer android com guide topics manifest application element html proc 如果分配给该属性的
  • 为什么 jQuery 点击事件会多次触发

    我这里有这个示例代码http jsfiddle net DBBUL 10 http jsfiddle net DBBUL 10 document ready function creategene click function confir
  • 无法将 INode 类型值分配给 类型变量。为什么?

    我想知道为什么以下代码无法工作 public static
  • VS Code:用 [+] [-] 符号代替默认的 [>] [∨] 折叠代码

    摘要 我想要两件事 1 我希望 VS Code 中的折叠符号是 类似于 Visual Studio 而不是默认的 gt v one 2 我想要我的扩展部分可以有下载和评级 preview 故事 我随机看到了这些功能 1 on 一个答案 ht
  • 如何在 Angular 中实现使用 google 登录

    我正在尝试在我的角度应用程序中实现谷歌登录功能 我这里用了两个包 abacritt angularx social login and angular oauth2 oidc 我创建了一个名为的自定义提供程序google authentic
  • EPi服务器开发

    除了 Episerver com 之外 使用EPiServer开发的人还使用哪些其他网站作为开发资源 一直在使用 coderesort com 但我发现它缺乏如何做事的示例 非常感谢 J 我用于EPiServer开发的通用资源 EPi服务器
  • 如何将“.csv”数据文件导入Redis数据库

    如何将 csv 数据文件导入 Redis 数据库 csv 文件中包含 id 时间 纬度 经度 列 您能否向我建议导入 CSV 文件并能够执行空间查询的最佳方法 这是一个非常广泛的问题 因为我们不知道您想要什么数据结构 您期望什么查询等等 为
  • Git:如何修改服务器的提交?

    我已经在 EC2 上的 git 服务器上推送了一些提交 而不是在 github 上 如何修改 git 服务器上的这些提交 操作就像 删除提交 例如变基 更改提交消息 是否可以 非常感谢 你几乎可以通过用力推动来完成所有事情 将您的本地树更改
  • Volatile.Read 和 Volatile.Write 背后的逻辑是什么?

    来自 MSDN Volatile Read 读取字段的值 在需要它的系统上 插入一个 阻止处理器重新排序内存的内存屏障 操作如下 如果在该方法之后出现读或写 代码 处理器无法移动它before这个方法 and Volatile Write
  • 如何停止使用扫描仪从标准输入读取多行?

    我正在做一个 JAVA 作业 应该处理多行输入 指令显示 输入是从标准输入读取的 给出了示例输入的示例 one 1 two 2 three 3 我不明白上面的示例输入 从标准输入读取 是什么意思 这是我编写的一个测试程序 它可以消除我的困惑
  • 为什么 @RunWith(SpringJUnit4ClassRunner.class) 不起作用?

    我正在尝试使用 Spring 框架使用 JUnit 测试 CRUD 方法 下面的代码完美运行 Transactional public class TestJdbcDaoImpl SuppressWarnings deprecation B
  • 使用 pygame 显示 unicode 符号

    我检查了其他答案 但不明白为什么我的代码错误地显示 This is what I currently see https i stack imgur com 8tNIK png 这是关于文本渲染的相关代码 font pygame font
  • 我应该使用 JDBC getNString() 而不是 getString() 吗?

    我们正在构建一个由 Oracle 数据库支持的 Java 应用程序 我们使用 JDBC 驱动程序 访问该数据库ojdbc6 jar and orai18n jar 数据库模式主要使用以下方式存储文本列NVARCHAR2数据类型 The JD
  • PHP:展平数组-最快的方法? [复制]

    这个问题在这里已经有答案了 是否有任何快速方法可以在不运行 foreach 循环的情况下展平数组并选择子键 在本例中为 键 和 值 或者 foreach 始终是最快的方法 Array 0 gt Array key gt string val
  • PostgreSQL 和锁定

    希望一些比我更聪明的 DBA 可以帮助我找到一个好的解决方案来完成我需要做的事情 为了便于讨论 我们假设我有一个名为 work 的表 其中包含一些列 其中一列表示给定客户端对该行工作的所有权 场景是 我将连接 2 个客户端并轮询表以查找要完
  • 如何以“正确”的方式处理带有空字节的 Python unicode 字符串?

    Question PyWin32 似乎很乐意将 null 终止的 unicode 字符串作为返回值 我想以 正确 的方式处理这些字符串 假设我得到一个像这样的字符串 u C Users Guest MyFile asy x00 x00sy
  • gsub 的转义字符串

    我读了一个文件 local logfile io open log txt r data logfile read a print data output n w r 1 2 n t x re S 是的 日志文件看起来很糟糕 因为它充满了各
  • 如何通过 HTML 按钮播放声音

    我目前通过网站播放音乐的方法是通过 HTML 音频标签 不过我希望能够通过 HTML 按钮来播放它 该按钮应该能够在播放和停止之间切换音乐 我在 JSFiddle 创建了一个示例 但不知道如何实现它 有人可以告诉我如何使用我的 JSFidd