首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何添加多个互相停止的音频播放按钮?

要实现多个互相停止的音频播放按钮,可以通过以下步骤来实现:

  1. HTML 结构:首先,在 HTML 中为每个音频播放按钮创建一个唯一的标识符(ID),并为每个按钮添加一个点击事件监听器。
代码语言:txt
复制
<button id="playBtn1">播放音频1</button>
<button id="playBtn2">播放音频2</button>
<button id="playBtn3">播放音频3</button>
  1. JavaScript 逻辑:使用 JavaScript 来处理音频播放和停止的逻辑。为了实现多个互相停止的按钮,我们需要创建一个音频对象和一个状态变量来跟踪当前播放的音频。
代码语言:txt
复制
// 创建音频对象
var audio1 = new Audio('audio1.mp3');
var audio2 = new Audio('audio2.mp3');
var audio3 = new Audio('audio3.mp3');

// 创建状态变量
var currentAudio = null;

// 按钮点击事件监听器
document.getElementById('playBtn1').addEventListener('click', function() {
  // 停止当前播放的音频
  if (currentAudio !== null && !currentAudio.paused) {
    currentAudio.pause();
  }

  // 播放音频1
  audio1.play();
  currentAudio = audio1;
});

document.getElementById('playBtn2').addEventListener('click', function() {
  // 停止当前播放的音频
  if (currentAudio !== null && !currentAudio.paused) {
    currentAudio.pause();
  }

  // 播放音频2
  audio2.play();
  currentAudio = audio2;
});

document.getElementById('playBtn3').addEventListener('click', function() {
  // 停止当前播放的音频
  if (currentAudio !== null && !currentAudio.paused) {
    currentAudio.pause();
  }

  // 播放音频3
  audio3.play();
  currentAudio = audio3;
});

这样,当点击一个音频播放按钮时,会停止当前正在播放的音频,并播放所点击的音频。这样就实现了多个互相停止的音频播放按钮。

注意:以上代码只是一个简单的示例,实际应用中可能需要更复杂的逻辑和界面设计。此外,为了实现更好的用户体验,还可以添加音频加载状态的处理、播放进度条、音量控制等功能。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Unity 编辑器开发实战【Custom Editor】- AudioDatabase Editor 音频库编辑器

音频库名称是一个string类型字段,因此使用EditorGUILayout中TextField函数来添加一个文本编辑框: using UnityEditor; using UnityEngine;...:十三、编辑器开发之AnimBool) 在折叠栏为打开状态时,遍历音频数据列表,每一项数据添加一个水平布局,从左到右依次添加音频图标、音频名称、一个Button按钮、时长信息、播放、停止、删除按钮...Unity中内置图标,如何查看Unity中内置图标在以往文章中有介绍:六、编辑器开发之GUIIcon 有了图标的名称后,通过EditorGUIUtility类中IconContent方法进行实现...("Toolbar Minus"), GUILayout.Width(20f))) { } 我们声明一个字典来存储当前正在播放音频项,点击播放按钮时,创建一个带有Audio Source组件物体并用其播放...,将其添加到字典中,点击停止播放按钮时,将其从字典移除,并销毁物体,点击删除按钮时,也要判断该项如果正在播放,先要进行移除和销毁,再删除该音频数据项: private Dictionary<AudioData

83820
  • 当WebRTC Pion示例无音频时候,如何添加音频模块并通过浏览器播放?

    在TSINGSEE青犀视频研究pion示例中,只有视频流,因此拉流肯定也会只拉到视频流,而不会有音频流。那如何添加音频流,并在浏览器播放出来?本文研究一下实现方法。...由于pion示例没有音频流,因此要使用webrtc pion将音频添加进去,需要修改地方是webrtc piongo服务,将音频添加进去。我们先从Go服务端到浏览器端进行一次逻辑流程分析。...一、Go服务修改 1、pion添加视频流如下: image.png 所以需要在此处在添加音频流。...二、浏览器端修改 1、向WebRTC Go服务推流,需要修改参数: image.png 2、拉取WebRTC流,需要添加音频: image.png 至此两个端分析就已完毕,目前就可以大致知道对两个端如何修改了...,具体修改内容则如下: 1、修改Go服务端 1)添加音频 image.png 2)保存音频流 image.png image.png 3)拉流时候,需要额外添加音频轨道 image.png 2、浏览器修改或添加

    1.8K20

    Android多媒体应用使用MediaPlayer播放音频

    player.start(); 3.停止播放 可以停止正在播放音频 player.stop(); 4.暂停播放 可以暂停正在播放音频 player.pause(); 下面做一个小实例,实现包括播放...、暂停/继续和停止功能简易音乐播放器 将要播放音频文件上传到SD卡Music目录中,这里要播放音频文件为Whistle.mp3 目录如图 布局文件,包括一个文本信息显示控件和三个按钮(播放、...("暂停"); hint.setText("继续播放音频..."); play.setEnabled(false);//播放按钮不可用 } } }); stop=(Button)findViewById...);//停止音频播放 } player.release();//释放资源 super.onDestroy(); } } 播放效果如图 ?...停止效果如图 ? 以上就是本文全部内容,希望对大家学习有所帮助。

    1.5K40

    如何将MV中音频添加到EasyNVR中做直播背景音乐?

    EasyNVR已经支持自定义上传音频文件,可以做慢直播场景使用,前两天有一个开发者提出一个问题:想把一个MV中音频拿出来放到EasyNVR中去做慢直播。...经过我们共同研究之后,终于想出一个办法,就是先将这个音乐提取出来,再添加进EasyNVR中。...音频文件在EasyNVR通道管理页面进行添加,如下图: 这样问题就解决了。...不得不说ffmpeg就是强大,ffmpeg是专门用于处理音视频开源库,既可以使用它API对音视频进行处理,也可以使用它提供工具,如 ffmpeg,ffplay,ffprobe,来编辑你音视频文件...如果大家对我们开发及产品编译比较感兴趣的话,可以关注我们博客,我们会不定期在博客中分享我们开发经验和一些功能使用技巧,欢迎大家了解。

    4.1K40

    笔记59 | Android管理音频焦点学习

    管理音频焦点 由于可能会有多个应用可以播放音频,所以我们应当考虑一下他们应该如何交互。...为了防止多个音乐播放应用同时播放音频,Android使用音频焦点(Audio Focus)来控制音频播放——即只有获取到音频焦点应用才能够播放音频。...在我们应用开始播放音频之前,它需要先请求音频焦点,然后再获取到音频焦点。另外,它还需要知道如何监听失去音频焦点事件并对此做出合适响应。...在实际场景当中,这意味着停止播放,移除媒体按钮监听,允许新音频播放器可以唯一地监听那些按钮事件,并且放弃自己音频焦点。...此时,如果想要恢复自己音频播放,我们需要等待某种特定用户行为发生(例如按下了我们应用当中播放按钮)。

    2K90

    如何多个页面,添加统一导航栏?我罗列对比了 5 个方案

    ,没有统一「导航栏」,这对于工具网站是非常不方便。...所以,我需要加一个统一导航栏,方便用户在多个页面之间跳转。我做事情很谨慎,一定要罗列多个方案,再做决策。我把所有可行方案都罗列到了本文中,并描述了各个方案优点、缺点。...因为导航栏一致性和可变性,开发时它一定是只存了一份代码。因为本方案不在编译时统一插入,而是在运行时动态插入,所以就需要多个页面引入同一份js文件,动态插入一样导航栏。...方案五:基于微前端微前端初衷正是为了解决巨石应用,也可以让多个应用放到同一个SPA中,切换更流畅。微前端方案中,通常分为「主应用」和「子应用」。可以把导航栏放在「主应用」中。优点框架不受限制。...但因为浏览器有缓存,所以体验非常丝滑,在多个页面之间切换非常快。

    8K171

    笔记60 | Android控制音量与音频播放学习

    同样地,我们需要能够对应用音频流进行播放(Play),停止(Stop),暂停(Pause),跳过(Skip),以及回放(Previous)等动作,并且并确保其正确性。...,例如:播放,停止,暂停,跳过,以及回放等。...== event.getKeyCode()) { // Handle key press. } } } } 因为可能会有多个程序在监听与媒体按钮相关事件...下面的例子显示了如何使用AudioManager来为我们应用注册监听与取消监听媒体按钮事件,当Receiver被注册上时,它将是唯一一个能够响应媒体按钮广播Receiver。...但是对于媒体播放应用来说并没有那么简单,实际上,在应用不可见(不能通过可见UI控件进行控制)时候,仍然能够响应媒体播放按钮事件是极其重要

    1.9K40

    微信小程序开发实战(14):音频组件(audio)

    -----------支持作者请转发本文----------- audio是用于播放在线音频组件,该组件默认会带一个控制面板,用于控制音频播放和暂停,以及显示音频作者、音频名称和当前播放时间信息。...该属性默认值是true,但必须指定该属性,如果不添加该属性,仍然不会显示控制面板。下面是一个使用audio组件简单例子。...图1 audio组件控制面板 点击播放按钮即可播放音乐,再次点击即可停止播放。 audio组件还有如下3个比较常用属性。...author:音频作者名字 name:音频名字 poster:音频对应封面图像地址 下面的布局文件设置了这3个属性。...图2 显示相关信息audio组件 audio组件还有一些事件可以设置,最常用是bindplay和bindpause事件,其中播放音频时触发bindplay,暂停音频时触发bindpause。

    2.8K10

    iOS后台音频播放及锁屏界面显示音频信息 原

    iOS后台播放音乐及用户交互处理 后台播放是任何一个音频软件都支持功能,在上一篇博客中,详细介绍了使用AVAudioPlayer播放音频方法,这篇博客将对后台处理做介绍,关于播放与设置音频博客地址...一、设置后台播放 iOS设置后台音频播放步骤非常简单,首先需要在系统设置plist文件中添加一个键Required background modes,值为App plays audio or streams...HOME回到主页面,会发现音频不会停,已经实现后台播放功能。...,当音频开始播放时,系统会自动从这个字典中读取要显示信息,如果需要动态显示,我们只需要不断更新这个字典即可。...首先需要添加这个头文件。

    3.1K30

    如何白嫖微软文本转语音

    你好,我是征哥,之前分享过微软文本转语音服务,已经听不出是机器了,很多人惊叹于它强大,希望能把自己文字转成语音,做为视频或文章配音,今天就来分享如何白嫖微软文本转语音。...录制电脑播放声音 上面的那个链接,我们可以输入文本,点击播放按钮就可以听到效果,还有很多角色、感情、音色可以选择。...现在问题就是如何录制电脑播放声音,如果你在安静地方,也可以用手机录制,但效果可能不太好,最好就是让电脑自己录制自己播放声音,这样播放时候就和自己听到效果完全一样。...Win7 Win10 然后在这里禁用“麦克风”,启用“立体声混音” 然后我们按 win + S 搜索录音机,就可以录制了: Win7 若要暂停录制音频,只需放心地单击“停止录制”,如果要继续录制音频...继续录制声音,录完后单击“停止录制”。单击“文件名”框,为录制声音键入文件名,然后单击“保存”将录制声音另存为音频文件。

    3.2K10

    Adobe Audition2020软件下载安装教程——全版本音频编辑软件安装

    Adobe Audition是一款专业数字音频编辑软件,具备多种音频处理工具和效果。...全版本Au( Audition软件)下载地址(包括最新2023版本):bangongzhushou.top除了编辑、混音、修剪功能之外,Adobe Audition还具备优秀音频播放功能,可满足用户播放音频文件需求...音频播放基本操作Adobe Audition音频播放功能非常简单易用,用户可以用鼠标左键单击音频文件,然后点击播放按钮即可播放该文件。...在播放时,用户可以通过空格键或单击播放按钮实现暂停,可以使用向前或向后按钮来调整播放位置。此外,还支持快速回放和快速前进,方便用户针对具体部分进行选取和播放。...用户可以调整音频播放速度、音量、平衡等设置,以满足不同听觉需求。同时,还可以根据需要添加实时效果,如反转、加速等音频效果,来丰富播放体验。

    64120

    AirServer2023英文专业版录屏投屏神器

    AirServer是一款Mac应用程序,可将AirPlay / AirTunes音频,视频,照片,幻灯片和镜像接收功能添加到Mac电脑。...2、可以通过多个设备连接同一个局域网,快速查看同一局域网内视频内容。AirServer 7就是这么一个让你可以通过多个设备进行投屏,并且可以快速获得你想要视频内容。...第三步:播放到你需要视频内容后你可以选择是否停止或者切换到下一台设备继续观看。第四步:播放到你想要视频媒体后你就可以点击鼠标右键单击它让它播放视频媒体功能会自动打开,这时候就会显示视频内容了。...第五步:播放视频后点击播放按钮就可以看到你想要视频播放路径了。3、支持多种播放格式: PNG (压缩格式)、 FHD (高清格式),支持 Media HD (HD音频)。...这些视频都是通过 WAV传输,而 AirServer 7将 WAV音频发送到用户电脑上,使得用户可以同时看多个屏幕。

    1.1K30

    html5视频常用API接口「建议收藏」

    接口方法,供写JS时直接调用,方便简单 API 事件说明 addTextTrack() 向音频/视频添加文本轨道。...25 //播放视频(点击播放按钮,后变成暂停) 26    function isPlay(obj1){ 27 if(video1.paused){    //paused属于视频...当前视频源URL ended 返回当前播放是否结束标志 error 返回当前播放错误状态 initialTime 返回初始播放位置 mediaGroup 当前音视频所属媒体组 (用来链接多个音视频标签...playing 当音频/视频在因缓冲而暂停或停止后已就绪时触发。 progress 当浏览器正在下载音频/视频时触发。 ratechange 当音频/视频播放速度已更改时触发。...timeupdate 当目前播放位置已更改时触发。 volumechange 当音量已更改时触发。 waiting 当视频由于需要缓冲下一帧而停止时触发。

    4K20

    基于reactH5音频播放器

    playing 当音频/视频在因缓冲而暂停或停止后已就绪时触发。...进度条大致原理就是获取音频的当前播放时长以及音频总时长比例,然后通过这个比例与进度条宽度相乘,可以得到当前播放时长下进度条需要被填充宽度。...进度条以及播放按钮布局代码大概就是这样,在css方面需要注意就是进度条容器与进度条填充块以及进度条触点间层级关系就好。 功能逻辑 进度动起来 播放时,currntTime是时刻变化。...那么如何监听呢? 进度控件自然是绝对定位。 固然可以用定时器做。但是在网页性能不好时候,定时器就是钱。前面提到ontimeupdate事件回调。那真的是太好了。...,在移动触点时候我选择将音频暂停 this.setState({ isPlaying: false,//播放按钮变更 startX: touch.pageX

    8.1K10

    Android简易“吹一吹实现”以及录音和播放示例

    主要思路和坑地方 主要思路是通过MediaRecorder提供getMaxAmplitude()函数,获取一段时间内输入音频最大幅值来进行检测,所以除了吹动作,其他声音也会被录进来。...; //播放按钮 Button btnPlay; //提示信息 TextView tvTips; //吹一吹小音箱 ImageView imvSound;...stopPlay(); } STATUS = RECORDING; //设置为录制状态 tvTips.setText("正在录制,点击播放按钮或者麦克风停止录制...; 在某些设备上可能不支持,于是就出了问题= =好吧,我也不知道还能说啥,就酱… Vector Asset添加图标颜色不变化 如上,我播放按钮啊,音响啊,之类图标都是通过Vector Asset添加...,这也是一个比较久远坑了,但是以前也没有记下来,即在Android L以下版本中,Vector Asset添加图标,修改颜色时不能使用颜色引用,而要直接写颜色,例如: <vector xmlns

    1.2K40
    领券