带有 HTML5 音频标签的自定义一键播放器

2024-04-21

<audio>我最近一直在做一些网络开发中的标签,我想做的一件事是使用它来构建单词列表并在列表中的每个单词旁边提供发音示例。设置这一点并不难,但是这种应用程序几乎不需要全套控件;只是一个播放按钮。

The controls的元素<audio>然而,标签似乎根本没有很好的记录;我能找到的就是“总是把‘on’放在这里,除非你想建立自己的播放器”。我不想构建自己的播放器,但是,我只想要一个简单的一键播放界面,没有其他任何东西,最好不需要 JavaScript 或 Flash。


这相当简单。你只需要调用播放方法audio单击某物时的 DOM 对象。该内容可以是图像、文本、链接或任何合适的东西。

这是一种可能的方法:

<a onclick="this.firstChild.play()"><audio src=".."></audio></a>

看一个例子 http://jsfiddle.net/4bxrR/750/

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

带有 HTML5 音频标签的自定义一键播放器 的相关文章

  • 在 Angular 中,如何动态地将某些单词包装在另一个 html 元素中?

    我有这个简单的角度组件 Component selector my component template p someString p export class MyComponent Input someString string som
  • 将 DIV 扩展到父列表项之外

    我有一个有序列表 它实际上是页面上产品的显示 在每个列表项中 li 有一些内容 后面跟着一个div在关闭列表项之前包含更多内容 我需要每个列表项中的 div 扩展 其宽度 超出其父列表项 并实际填充有序列表的宽度 ol 每个 div 还需要
  • 提交和 onclick 不能一起工作

  • CSS 停止表格行内的分页符

    我试图避免在可能超过一页的 HTML 表的行内出现分页符 我正在使用 Internet Explorer 打印预览以及 BCL EasyPDFSDK 转换为 PDF 来测试这一点 我将以下 CSS 样式以各种组合应用到 td 元素 但对于每
  • 为具有可变内容的内联块元素提供相同的高度?

    我有 4 个宽度固定但内容可变的内联块元素 并且我希望所有这些元素具有相同的高度 最大元素的高度 请参见这个jsfiddle http jsfiddle net kKZXj 我应该如何实现这个目标 如果仅使用 css 无法做到这一点 那么使
  • 将 matplotlib png 转换为 base64 以在 html 模板中查看

    背景 你好 我正在尝试制作一个简单的网络应用程序 按照教程计算阻尼振动方程 并将结果的 png 返回到 html 页面 然后将其转换为 Base64 字符串 Problem 该应用程序运行正常 只是在计算结果时返回损坏的图像图标 可能是因为
  • KineticJS - 将舞台缩放到视口

    我正在努力将默认分辨率设置为 1366x756 我会根据视口来放大和缩小它 类似于此处显示的示例 http blogs msdn com b davrous archive 2012 04 06 modernizing your html5
  • HTML if 语句在 CDN 失败时加载本地 JS/CSS

    当从 CDN 或任何外部服务器加载 CSS JS 文件时 有可能 即使概率很低 由于外部故障而丢失该文件 在这种情况下 html 页面将因缺乏适当的 CSS 和 JS 而被损坏 有没有一种实用的方法可以在 CDN 故障时加载本地版本 IF
  • 使用后代选择器的响应式网站

    我试图使用媒体查询使我的网站响应 但是当我在代码的某些部分使用后代选择器时 页面没有响应 当我使用此代码时 该页面是响应式的 div1 float left width 20 height 200px background color re
  • Safari 的 Javascript 与 document.write 的问题

    我的问题只发生在 Safari 上 IE FF Chrome 和 Opera 都可以完美运行 我正在向 DOM 添加一个对象 与 YouTube 的方式完全相同 具体取决于 ActiveX 或 NPAPI 因此在确定写入对象类型后 我通过以
  • 如何将 default.html 的字符编码设置为 UTF-8?

    我花了几个小时来验证我的网站HTML 4 01 严格事实上我已经成功了 但仍然有一个警告我无法摆脱 警告是 字符编码不匹配 中指定的字符编码 HTTP 标头 iso 8859 1 是 与中的值不同 元素 utf 8 我将使用该值 来自 HT
  • 禁用 Materialise Carousel 上的触摸

    看起来以前没有人问过这个问题 因为我几乎在互联网上寻找一个非常简单的答案 如何禁用在物化轮播上向左 向右滑动的功能 在 Materialize js 添加 编辑 var allowCarouselDrag true value functi
  • css伪类最后一个子问题

    我在使用时遇到问题 last child伪选择器 我有以下标记 div class apply container div
  • 防止浏览器弹出警告窗口

    我正在尝试在新窗口中打开 jsp 页面 使用 JavaScriptwindow open产生浏览器警告 并且在某些情况下 firefox 将默认阻止弹出窗口 有没有办法解决这个问题 这不是恶意应用程序 它是内部用户工具 大多数浏览器不会阻止
  • 检测视频何时缓冲,如果缓冲则显示 gif

    我想知道是否有办法在视频缓冲时显示 gif 我正在使用 HTML5 视频标签 其中有一种方法可以检测视频何时缓冲 如果没有 是否有替代方法 我看过 如何检测视频何时缓冲 https stackoverflow com questions 1
  • 如何将水平 ul 列表中的项目与图像垂直对齐?

    我有以下 html 代码 div ul li a href index php site login About a li li a href index php site login FAQ a li li a href http twi
  • z-index 属性到底如何工作?

    如何z index实际上工作吗 它是否对未指定的元素起作用position 它是否支持具有指定的元素 即将它们放在顶部 position 像这样的数字必须是负数吗 div below div div less below div div o
  • 使用 MailTo 链接,我可以向发件人发送副本吗?

    我们开发了一个非常简单的表单 一旦提交 就会填充一封电子邮件以发送支持票证 这些电子邮件目前发送给我们的 支持人员 但如果我们也能向发件人发送一份副本 那就更理想了 我们正在使用 mailto 链接 这可能吗 例如 我们的员工 Brad 填
  • 将水平线添加到 html rmarkdown 文档隐藏文本部分

    我正在制作一个与 HTML 页面结合的 Rmarkdown 文档 我不想用标题或项目符号分隔某些文本部分 而是想在它们之间绘制水平线 根据http rmarkdown rstudio com authoring basics html ht
  • 响应覆盖 div 下的链接

    场景是这样的 我已经构建了一个顶部导航原型 它需要在其顶部有一个覆盖 透明 PNG 图像 目前它覆盖了大约 1 3 的链接 请看下面 有什么方法可以让前 1 3 的链接做出响应 即使有一个 div div 部分覆盖它们 覆盖层不会包含任何可

随机推荐