使用 javascript onClick 播放 mp3 文件

2024-05-02

我正在播放 mp3 文件,只是 javascript onClick。

下面是我的代码:

//Music File 1
<audio id="id1" src="01.mp3"></audio>
<button onClick="document.getElementById("id1").play()">Play</button>
<button onClick="document.getElementById("id1").pause()">Stop</button>

//Music File 2
<audio id="id2" src="02.mp3"></audio>
<button onClick="document.getElementById("id2").play()">Play</button>
<button onClick="document.getElementById("id2").pause()">Stop</button>

我的问题是,我正在播放音乐 01.mp3,如果我按音乐 02.mp3 处的播放按钮,我希望它停止播放。

有人能给我比这更好的解决方案吗?总的来说,我想要播放像www.mp3skull.com这样的音乐,如果按下其他文件播放则停止播放。

问候, 维拉克


除了标签错误(假设这只是本文中的拼写错误),如果您想要一个更好的 Javascript 音频播放器,请查看http://jplayer.org/ http://jplayer.org/- 它是一个开源、免费的播放器 API。

玩家可用的方法之一,.pauseOthers()停止页面上除您运行该方法的玩家之外的所有玩家 - 在您的情况下很有用。

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

使用 javascript onClick 播放 mp3 文件 的相关文章

  • 引导导航栏菜单与文本重叠

    我使用最新版本的引导程序 当我调整屏幕浏览器的大小时 使用小切换按钮下拉导航栏时 导航栏会重叠页面上的文本 而不是向下推页面内容 我已经多次研究过这个问题 我尝试将 padding bottom 放在导航栏上 将 padding top 放
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • 如何在JQGrid的行编辑中禁用某些单元格的编辑?

    当我单击网格的任何行时 所有可编辑的列都变为可编辑 我希望每行的某些列都可以单独编辑 Column 1 Column 2 Column 3 ROW Number 1 editable non editable non editable RO
  • 如何在不使用变换或顶部/左侧的情况下转换列表中项目的位置

    有一天我偶然发现一个例子 https codepen io itslit pen gvKrMY它使用 Vue js 但我的问题更多是关于 Vue 用于实现状态之间转换的 CSS 和 HTML 卡片暂时获得等级 shuffleMedium m
  • 颜色逻辑算法

    我们正在构建一个体育应用程序 并希望将团队颜色融入到应用程序的各个部分 现在 每个团队都可以使用几种不同的颜色来表示 我想做的是执行检查以验证两个团队颜色是否在彼此一定的范围内 这样我就不会显示两个相似的颜色 因此 如果团队 1 的主要团队
  • 先按行再按列布局 div

    我有一个容器div and 3 div里面如下 div div 1 div div 2 div div 3 div div 不知道每一个的内容div内部 但它们的高度和宽度是可变的 集装箱的高度由最高的决定div inside 我想展示这些
  • 如何检查变量是 jQuery 对象还是普通 DOM 元素?

    如何检查变量是 jQuery 对象还是普通 DOM 元素 一个 jquery 对象有一个jquery财产 jquery 对象是一个instanceof jQuery instanceof on MDN https developer moz
  • 获取 FileReader() 的结果对象

    有什么方法可以在不通过函数的情况下获取 FileReader 的结果对象 我在下面制作了示例代码 HTML br br br div div JS var code lorem ipsum input type file change fu
  • ReferenceError:regeneratorRuntime未定义(但在范围内工作)

    我遇到过这种奇怪的情况 ReferenceError regeneratorRuntime is not defined 我已经设法在一个非常小的设置中重现 与同一问题上的类似问题相比 并且还注意到一些奇怪的行为 具体取决于是否使用范围 以
  • 如何使用 JavaScript 创建链接?

    我有一个标题字符串和一个链接字符串 我不知道如何将两者放在一起以使用 JavaScript 在页面上创建链接 任何帮助表示赞赏 我试图解决这个问题的原因是因为我有一个 RSS 源并且有一个标题和 URL 列表 我想将标题链接到 URL 以使
  • Chart.js 在初始化时设置活动段

    我正在使用 Chart js v2 并且尝试在加载图表时模拟圆环图上某个段的 悬停状态 因此看起来有一个部分已突出显示 我已经搜索和梳理了代码一天 但找不到一个好的方法来做到这一点 提前致谢 设置片段的悬停样式有点令人困惑 因为它没有真正记
  • 是否存在 IsCallable 为 false 但 IsConstructor 为 true 的 JS 对象?

    ECMAScript 规范函数可调用 https www ecma international org ecma 262 6 0 index html sec iscallable当且仅当其参数具有 Call 内部方法时返回 true 它在
  • 如何修改每个JSON对象javascript

    我想修改里面的每个 JSON 值cooldown object cooldown user 1 This user2 0 This 在 Javascript 中使用 for 语句 我研究了好几个小时 只找到了内部的 blocks Edit
  • 在新的 Google 协作平台 <嵌入 HTML> 中使用 localStorage 和 IndexedDB 不起作用

    我正在尝试将新的 Google 协作平台用于我开发的网页 但是 我在存储本地数据时遇到了问题 本地文件在 Windows 和 Apple safari chrome 中运行良好 从 Google 协作平台尝试一下 没有什么乐趣 此外 在 s
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 响应式图像 - srcset 和尺寸属性 - 如何正确使用两者:基于设备像素比和基于视口的选择一起?

    到目前为止 我经常读到这个问题 并且它也发生在我自己的项目中 这里介绍一下我到目前为止所发现的关于 srcset 和 size 属性的内容 关于如何使用有两种不同的可能性srcset 属性 来源 w3c http w3c github io
  • 带有淘汰赛js的隐形recaptcha

    我正在完成隐形验证码 但我在实现它时遇到问题 谷歌开发人员页面中的代码显示它应该是这样的
  • 可以在初始 DOM 解析期间/之前修改 DOM 吗?

    是否可以在初始 DOM 解析期间或之前修改 DOM 或者我是否必须等到 DOM 被解析和构建之后才能与其交互 更具体地说 是否有可能阻止 DOM 中的脚本元素使用用户脚本 内容脚本或 Chrome 或 Firefox 中的类似脚本运行 在解
  • 在打字稿中导入 json

    我是 typescript 的新手 在我的项目中 我们使用 typescript2 在我的要求之一中 我需要导入 json 文件 所以我创建了 d ts 文件如下 test d ts declare module json const va
  • Bootstrap按钮加载+Ajax

    我正在使用 Twitter Bootstrap 的按钮加载状态 http twitter github com bootstrap javascript html buttons http twitter github com bootst

随机推荐

  • 为什么我无法在 Android 上从串口打开/写入?

    我编写了一个 Android 应用程序 它在 Android 4 4 Kitkat 设备上的自定义内核上运行 该设备使用 Android 串行端口 API https code google com p android serialport
  • 在处理器生成的类中使用库

    我正在开发一个库来使用注释和处理器生成类 生成的类应该使用Gson来自谷歌的图书馆 我的问题是 我应该在哪里添加 Gson 依赖项 我目前正在将其添加到处理器 build gradle 中 但是当生成类时 找不到 Gson Android
  • 为什么 rm 不能按我的预期工作?

    我只想做一件简单的事 我在目录中得到了以下文件 AppInterface h baa PEMsg h PluginInterface h 然后我发出命令 ls grep v h rm rf 令我非常沮丧的是 baa不会被删除 但是这个 ls
  • 没有名为 objc 的模块

    我正在尝试将 cocoa python 与 Xcode 一起使用 但它总是会出现错误 Traceback most recent call last File main py line 10 in
  • 将 viewbag 转换为 javascript 数组

    我想将数据从 ViewBag mytags 获取到 Javascript 数组 但我无法执行此操作 function var sampleTags new Array var array Html Raw Json Encode ViewB
  • Delphi LZMA减压样本

    我发现在this https stackoverflow com questions 4344976 lzma or 7zip in delphi的线程链接delphi压缩包 https github com ccy delphi zip具
  • 将 Facebook 营销活动目标与洞察行动类型相匹配

    Facebook 活动的目标是此处列出的 https developers facebook com docs marketing api reference ad campaign group Creating PAGE LIKES VI
  • 在 Flutter 中将数据异步加载到 ChangeNotifier 模型中

    在我的 Flutter 应用程序中我有一个小部件 class HomeScreen extends StatelessWidget 使用模型 class HomeScreenModel extends ChangeNotifier 这两个对
  • CXFServlet 抛出 java.lang.NoSuchMethodError:

    java lang NoSuchMethodError org codehaus stax2 ri EmptyIterator getInstance Lorg codehaus stax2 ri EmptyIterator at com
  • Markdown/Github:作为列表子项的代码块的语法突出显示

    在Github MD中 如果我们想在列表的子级时启用代码块 我们需要用8个空格来表示它 但是如何让该代码块具有语法高亮功能呢 以下代码无法按预期工作 1 foo python print bar 2 bar python print bar
  • 如何使用 RestTemplate 禁用编码

    我正在使用 REST 模板有意在请求 uri 中发送 例如 items a b String responseEntity restTemplate exchange items a b requestObj getHttpMethod r
  • angular.isdefine 有什么好处?

    有什么好处angular isdefined超过和超过foo undefined 我一时想不出有什么好处 在 Javascript 中以任何方式访问真正未定义的变量 除了 typeof 都会抛出错误 你只能使用Angular isDefin
  • AWS ECS 重启策略

    我检查了在 ECS 集群中运行的一个 docker 容器 它的重启策略为空白 HostConfig RestartPolicy Name 我不确定 ECS 在发生故障时会做什么 但我想将策略更改为在实例中运行的 cmd 失败时重新启动容器实
  • 如何使用 JavaScript 或 jQuery 获取 html 元素的比例值?

    我想知道如何获得元素的比例值 我努力了 element css webkit transform 返回matrix scaleX 0 0 scaleY 0 0 有没有办法得到scaleX and scaleY only 找出文档和元素之间的
  • PrimaryContext如何登录域服务器

    我有以下 C 代码 用于连接到我的域服务器并对其执行一些操作 我的计算机上一切正常 我可以正常运行所有命令 我的问题是 连接服务器使用什么凭据 我假设它使用当前用户的凭据 所以我真正的问题是这对普通用户有效吗 我是管理员 它在我的机器上运行
  • 如何为 HTML 验证提供自定义验证错误消息?

    当我使用默认 HTML 验证时 它会显示默认错误消息 这不是我想向客户显示的 我需要自定义消息并为每个验证提供不同的信息 例如最小 最大 类型和要求 例如 该字段为必填项 值不匹配 参考传统的HTML代码
  • 将数据发送到 parse.com 并更新 Angular $scope

    我正在将数据发送到 parse com 上的类 我想运行此函数并更新 scope无需重新加载视图 创建一个Programme运行下面的函数工作正常 但是有时在创建新程序后不会更新视图 并且需要刷新页面 当调用整个函数时 如底部所示 getP
  • 如何在 Objective-C 中创建委托?

    我知道代表如何工作 也知道如何使用它们 但我该如何创建它们呢 Objective C 委托是一个已分配给delegate属性另一个对象 要创建一个 您需要定义一个实现您感兴趣的委托方法的类 并将该类标记为实现委托协议 例如 假设您有一个UI
  • Spark parquet 分区:大量文件

    我正在尝试利用 Spark 分区 我试图做类似的事情 data write partitionBy key parquet location 这里的问题是每个分区都会创建大量镶木地板文件 如果我尝试从根目录读取 则会导致读取速度变慢 为了避
  • 使用 javascript onClick 播放 mp3 文件

    我正在播放 mp3 文件 只是 javascript onClick 下面是我的代码 Music File 1