一个页面多个audio播放时控制之播放一个

最新推荐文章于 2023-07-14 16:44:26 发布
最新推荐文章于 2023-07-14 16:44:26 发布
阅读量857 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46237561/article/details/118222030
版权

audio 是H5的新标签
常用的属性有

  • src 资源
  • autoplay 自动播放
  • controls 显示默认控件
  • loop 循环播放
  • muted 静音
  • preload 规定当网页加载时，音频是否默认被加载以及如何被加载。
  • auto
    metadata
    none

controls控件中每个小控件的显示
可以设置显示控件
controlslist="nodownload nofullscreen noremoteplayback"

下面是完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.record-audio {
			display: block;
		}
	</style>
	<body>
		<audio class="record-audio" controls controlslist="nodownload  nofullscreen noremoteplayback">
			<source src="./audio.mp3" type="audio/mpeg" />
		</audio>
		<audio class="record-audio" controls controlslist="nodownload  nofullscreen noremoteplayback">
			<source src="./audio.mp3" type="audio/mpeg" />
		</audio>
		<audio class="record-audio" controls controlslist="nodownload  nofullscreen noremoteplayback">
			<source src="./audio.mp3" type="audio/mpeg" />
		</audio>
		<audio class="record-audio" controls controlslist="nodownload  nofullscreen noremoteplayback">
			<source src="./audio.mp3" type="audio/mpeg" />
		</audio>
		<audio class="record-audio" controls controlslist="nodownload  nofullscreen noremoteplayback">
			<source src="./audio.mp3" type="audio/mpeg" />
		</audio>
		<audio class="record-audio" controls controlslist="nodownload  nofullscreen noremoteplayback">
			<source src="./audio.mp3" type="audio/mpeg" />
		</audio>
		<script type="text/javascript">
			// 多个音频时播放一个
			const audios = document.getElementsByTagName("audio");
			// 暂停函数
			function pauseAll() {
				var self = this;
				[].forEach.call(audios, function(i) {
					// 将audios中其他的audio全部暂停
					i !== self && i.pause()
				})
			}

			// 给play事件绑定暂停函数
			;
			[].forEach.call(audios, function(i) {
				i.addEventListener('play', pauseAll.bind(i))
			})
		</script>
	</body>
</html>
975619483@qq.com
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5中自动播放,HTML5自动播放一次(HTML5 autoplay once)
weixin_32595533的博客
06-19 724
HTML5自动播放一次(HTML5 autoplay once)以下javascript函数提供并自动播放音频文件(通过HTML 5音频标签)，在6秒时切换mp3播放并从头开始循环+自动播放音频。JavaScript的：function updateaudio() {var a_str = '';document.getElementById('audio_span').innerHTML = a...
Simple-Unity-Audio-Manager:一个用于Unity的分散式音频播放系统，旨在简化并按比例构建！
05-05
厌倦了不得不管理十亿个撒谎的AudioSources的烦恼？ 那将不再是现实！ 再也不用担心声音和音乐了！ Jacky的Simple Audio Manager（又名JSAM ）是Unity的易于使用，高性能和去中心化的音频播放系统。 JSAM非常适合...
Audio在移动端只播放一次
bwxs37277的博客
07-16 1041
如下代码在移动端只会播放一次声音。 <audio id="s"> <source src="music.mp3" type="audio/mpeg"> </audio> <button onclick="s.play();">play</button> Audio有一个load方法，介绍如下：load() 方法重新加载音频/视频...
html5调用系统声音1s响一次_HTML5音频 - 声音只播放一次
weixin_31964135的博客
01-12 238
I am using Chrome and this is my code:$('.sound').live('click', function () {var sound = $("#letter_audio")[0];sound.pause();sound.currentTime = 0;sound.play();return false;});How come the sound plays...
html5调用系统声音1s响一次,HTML5音频 - 声音只播放一次
weixin_31842775的博客
01-12 187
I am using Chrome and this is my code:$('.sound').live('click', function () {var sound = $("#letter_audio")[0];sound.pause();sound.currentTime = 0;sound.play();return false;});How come the sound plays...
h5同一个页面多个视频只能播放一个
m0_61195004的博客
10-31 996
h5同一个页面多个视频只能播放一个
微信小程序多音频播放进度条问题
12-29
真的脑子疼，小程序的音频组件居然没有进度控制的功能，网上的方法又很少，逻辑通了就好写了。 1.所有音频播放、停止按钮使用状态切换控制 2.当点击某个音频播放时，首先将所有音频的状态置为停止状态，然后将当前...
html+audio.js实现：多功能的底部悬浮音乐播放器，支持随机播放和音量调节
04-19
技术实现一个多功能的底部悬浮音乐播放器。该播放器支持随机播放和音量调节，可以让用户更加方便地控制音乐的播放。 在实现过程中，我们可以使用html5的audio标签来播放音乐，并结合audio.js库来实现更多的功能。...
fm_citypatient:一个简单的，小型的基于Nodejs + HTML5 + Angularjs的FM网站
06-07
一个基于Nodejs + HTML5的FM网站这个项目本来是为了之前一个同学的小站搭建的，不过这个网站我直接基于HTML5的Audio编写的，所以低版本的浏览器是无法使用的。当前页面还并未添加响应式的样式设计。这个网站代码不多...
实验4-HTML5的多媒体.docx
12-17
通过本实验，我们可以实现一个具有多媒体播放功能的页面，其中包括音频和视频的播放、暂停、快进、慢速播放和音量控制等功能。此外，我们还可以实现视频全屏播放的功能。 六、结论 本实验验证了HTML5多媒体技术的...
html js 播放mp3 只一次,如何让JS中的function只运行一次啊?
weixin_32969997的博客
06-29 424
可以考虑用cookie保存用户对应信息。如果是登陆后访问的页面就存userid,如果不要求登陆就存ip。 //这里根据业务需要可以调整，比如不存 //具体信息，随便存放一个数字，只要cookie存在就认为目标已访问过在跳转的js代码前增加读取cookie信息的判断，如果存在cookie，校验对应参数,校验到已访问则不执行跳转。如果校验到cookie不存在,则先通过当前时间和24点的时间差计算出c...
html音频只播放一次,html5,javascript_html5 audio在IOS上播放MP3为何只能播放一次，html5,javascript,前端 - phpStudy...
weixin_42364539的博客
06-26 629
html5 audio在IOS上播放MP3为何只能播放一次在一个项目中遇到的问题，HTML5 audio播放MP3文件(只有几秒的提示音)，在安卓上能正常播放，但在IOS上就只能播放一次，再点击就不会播放了。经测试可能是 currentTime的问题，Player = function() {"use strict";function e(e, t) {var n, r, i = !1,o = "...
unity控制声音只播放一次，重复触发不再播放
Monkey_Xuan的博客
03-12 3970
public class IntroduceMusic : MonoBehaviour { AudioSource audioSource;//声音组件 private void Start() { audioSource = transform.GetComponent<AudioSource>(); } float timer; //计时器 private void Update() { if (aud.
html网页声音一直播放代码,javascript – 一次播放一个HTML音频元素
weixin_39718083的博客
05-31 168
我在一个页面上有很多音频元素,我想一次只播放一个元素.也就是说,如果正在播放一个音频元素,并且我在另一个元素上单击播放,则前一个音频元素应该暂停.我从另一个问题中找到了一个jQuery代码来执行此操作,但它使用图像作为播放/暂停控件.我正在使用音频元素的内置controls =’controls’属性.在我的情况下,是否可以使用jQuery来控制音频元素的播放/暂停功能？#1 Intro - Th...
React中页面多个audio每次只播放一个
最新发布
lwfcomeon的博客
07-14 242
React中页面多个audio每次只播放一个
手机玩html5游戏避免播放,安卓手机上html5页面播放音乐为何只能播放一次？
weixin_33379371的博客
06-02 81
在安卓手机上，打开一个播放音乐的页面，点击播放，第一次点击的时候能够播放，播放完以后再次点击播放却无法播放了，这是什么原因导致的，有什么方法可以解决？另外同样的页面在ios下面没有问题。测试用例代码如下：音乐播放器播放暂停audio = document.getElementById("music");document.getElementById("zt").style.display = "n...
html5 播放多个mp3文件,html5 audio在IOS上播放MP3为何只能播放一次
weixin_29775951的博客
06-16 239
在一个项目中遇到的问题，HTML5 audio播放MP3文件(只有几秒的提示音)，在安卓上能正常播放，但在IOS上就只能播放一次，再点击就不会播放了。经测试可能是 currentTime的问题，Player = function() {"use strict";function e(e, t) {var n, r, i = !1,o = "audio-player";if (n = documen...
同一页面播放多个mp3的解决方法
weixin_34250434的博客
03-02 462
为什么80%的码农都做不了架构师？>>> ...
audio如何播放多个音频
06-10
要在网页上播放多个音频，您可以使用多个`<audio>`标签，每个标签对应一个音频文件。可以使用JavaScript来控制多个音频的播放和暂停。 以下是一个播放多个音频的示例代码： ```html <audio id="audio1" src="audio1.mp3"></audio> <audio id="audio2" src="audio2.mp3"></audio> <button onclick="playAudio('audio1')">播放音频1</button> <button onclick="playAudio('audio2')">播放音频2</button> <button onclick="pauseAudio()">暂停所有音频</button> <script> var audios = document.getElementsByTagName('audio'); function playAudio(id) { for (var i = 0; i < audios.length; i++) { if (audios[i].id === id) { audios[i].play(); } else { audios[i].pause(); } } } function pauseAudio() { for (var i = 0; i < audios.length; i++) { audios[i].pause(); } } </script> ``` 在上面的示例中，我们定义了两个`<audio>`标签，每个标签对应一个音频文件。我们还定义了三个按钮，分别用于播放音频1、播放音频2和暂停所有音频。 当用户单击播放音频按钮时，我们使用`playAudio`函数来播放指定的音频，并暂停其他的音频。当用户单击暂停所有音频按钮时，我们使用`pauseAudio`函数来暂停所有的音频。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值