首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >使用javascript一次循环4个以上的声音

使用javascript一次循环4个以上的声音
EN

Stack Overflow用户
提问于 2013-09-07 19:56:22
回答 1查看 481关注 0票数 0

感谢您查看我的问题。我想同时播放多个音频循环,以便它们是同步的,立即将它们全部静音,然后有按钮来静音和取消静音每个声音。我已经用4个或更少的声音实现了这一点。任何一次超过4个声音都不能播放。你能帮我做这个吗?我一次播放它们,然后静音和取消静音的原因是让它们保持同步,因为循环的长度和bpm是相同的。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!--declare audio tags and sounds-->
<audio id="audio" src="one.ogg" loop></audio>
<audio id="audio2" src="two.ogg" loop></audio>
<audio id="audio3" src="three.ogg" loop></audio>
<audio id="audio4" src="four.ogg" loop></audio>
<audio id="audio5" src="five.ogg" loop></audio>
<audio id="audio6" src="six.ogg" loop></audio>
<audio id="audio7" src="seven.ogg" loop></audio>
<audio id="audio8" src="eight.ogg" loop></audio>
<audio id="audio9" src="nine.ogg" loop></audio>
<audio id="audio10" src="ten.ogg" loop></audio>

<!--Create new webkitaudiocontext for each sound and play-->

<script type="text/javascript">
var context = new webkitAudioContext;
var el = document.getElementById('audio');
var source = context.createMediaElementSource(el);
source.connect(context.destination);
el.play();


var context2 = new webkitAudioContext;
var el2 = document.getElementById('audio2');
var source2 = context2.createMediaElementSource(el2);
source2.connect(context2.destination);
el2.play();

    var context3 = new webkitAudioContext;
var el3 = document.getElementById('audio3');
var source3 = context3.createMediaElementSource(el3);
source3.connect(context3.destination);
el3.play();

    var context4 = new webkitAudioContext;
var el4 = document.getElementById('audio4');
var source4 = context4.createMediaElementSource(el4);
source4.connect(context4.destination);
el4.play();

    var context5 = new webkitAudioContext;
var el5 = document.getElementById('audio5');
var source5 = context5.createMediaElementSource(el5);
source5.connect(context5.destination);
el5.play();

    var context6 = new webkitAudioContext;
var el6 = document.getElementById('audio6');
var source6 = context6.createMediaElementSource(el6);
source6.connect(context6.destination);
el6.play();

    var context7 = new webkitAudioContext;
var el7 = document.getElementById('audio7');
var source7 = context7.createMediaElementSource(el7);
source7.connect(context7.destination);
el7.play();


    var context8 = new webkitAudioContext;
var el8 = document.getElementById('audio8');
var source8 = context8.createMediaElementSource(el8);
source8.connect(context8.destination);
el8.play();

    var context9 = new webkitAudioContext;
var el9 = document.getElementById('audio9');
var source9 = context9.createMediaElementSource(el9);
source9.connect(context9.destination);
el9.play();

    var context10 = new webkitAudioContext;
var el10 = document.getElementById('audio10');
var source10 = context10.createMediaElementSource(el10);
source10.connect(context10.destination);
el10.play();


//functions that check to see if the audio is muted or playing on button click.

function funct(){
if (el.muted == false){
el.muted = true;    
return;
}
if (el.muted == true){
el.muted = false;   
return;
}
}

function funct2(){
if (el2.muted == false){
el2.muted = true;   
return;
}
if (el2.muted == true){
el2.muted = false;  
return;
}   
}

function funct3(){
if (el3.muted == false){
el3.muted = true;   
return;
}
if (el3.muted == true){
el3.muted = false;  
return;
}   
}

function funct4(){
if (el4.muted == false){
el4.muted = true;   
return;
}
if (el4.muted == true){
el4.muted = false;  
return;
}   
}

function funct5(){
if (el5.muted == false){
el5.muted = true;   
return;
}
if (el5.muted == true){
el5.muted = false;  
return;
}   
}


function funct6(){
if (el6.muted == false){
el6.muted = true;   
return;
}
if (el6.muted == true){
el6.muted = false;  
return;
}   
}

function funct7(){
if (el7.muted == false){
el7.muted = true;   
return;
}
if (el7.muted == true){
el7.muted = false;  
return;
}   
}

function funct8(){
if (el8.muted == false){
el8.muted = true;   
return;
}
if (el8.muted == true){
el8.muted = false;  
return;
}   
}


function funct9(){
if (el9.muted == false){
el9.muted = true;   
return;
}
if (el9.muted == true){
el9.muted = false;  
return;
}   
}


function funct10(){
if (el10.muted == false){
el10.muted = true;  
return;
}
if (el10.muted == true){
el10.muted = false; 
return;
}   
}



//buttons that mute or unmute the playing audio

</script>
<a href="#current" onclick="funct()">Link 1</a>
<a href="#current" onclick="funct2()">Link 2</a>
<a href="#current" onclick="funct3()">Link 3</a>
<a href="#current" onclick="funct4()">Link 4</a>
<a href="#current" onclick="funct5()">Link 5</a>
<a href="#current" onclick="funct6()">Link 6</a>
<a href="#current" onclick="funct7()">Link 7</a>
<a href="#current" onclick="funct8()">Link 8</a>
<a href="#current" onclick="funct9()">Link 9</a>
<a href="#current" onclick="funct10()">Link 10</a>
EN

回答 1

Stack Overflow用户

发布于 2013-09-09 10:33:45

如果您需要高级实时音频操作,请使用Web Audio API而不是HTML5 <audio> element。

Web Audio API支持定时和多个同时播放语音。

http://www.html5rocks.com/en/tutorials/webaudio/intro/

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18677316

复制
相关文章
JavaScript 使用 for 循环时出现的问题
有一些项目组在定位问题的时候发现,在使用 “for(x in array)” 这样的写法的时候,在 IE 浏览器下,x 出现了非预期的值。
四火
2022/07/15
4K0
JavaScript 使用 for 循环时出现的问题
如何在JavaScript中使用for循环
循环允许我们通过循环数组或对象中的项并做一些事情,比如说打印它们,修改它们,或执行其他类型的任务或动作。JavaScript有各种各样的循环,for循环允许我们对一个集合(如数组)进行迭代。
chuckQu
2022/11/28
5.1K0
如何在JavaScript中使用for循环
JavaScript 循环
在程序开发中,存在大量的重复性操作或计算,这些任务必须依靠循环结构来完成。JavaScript 定义了 while、for 和do/while三种类型循环语句。
用户3519280
2023/07/07
1870
JavaScript 循环
javascript循环
1.while 语法格式:A. while(条件){ 执行语句 } 例如: var i=0; while(i<5){ i++; } console.log(i) //结果5 B. do{ 执行语句 }while(条件) 例如: var i=0; do{ i++; }while(i<5) console.log(i) //结果是5 2.
天天_哥
2018/09/29
5080
JavaScript for 循环
如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。
陈不成i
2021/07/16
4680
JavaScript的循环语句
for循环是一种前测试循环语句,但它具有在执行循环之前初始化变量和定义循环后要执行的代码的能力。以下是for循环的语法:
小小鱼儿小小林
2020/06/24
1K0
JavaScript 循环语句 - for 、while 循环
这是采用indexOf()方法定位元素第一次出现的位置,然后与下标判断是否一致,如果一致,则加入到另一个数组中。
Devops海洋的渔夫
2019/06/02
2.1K0
windows2016以上版本云服务器开启声音的办法
刚刚发现云服务器没有声音,查找了一些云+社区的解决方法,前面的都可以正常找到,到最后在回到桌面后点开腾讯云代理服务器管理器,硬是怎么都找不到那个服务在哪里,研究了半天才找到,这边就顺着前辈的方案更新一些其他版本的开启方法及路径。
碧海蓝天1
2021/10/29
7.7K0
javascript事件循环
JavaScript 从一开始被创造出来就使用的单线程,这主要与他的用途相关。JavaScript主要用来与用户交互、操作网页上的dom元素等工作。
腾讯IVWEB团队
2020/06/29
1.2K0
javascript事件循环
JavaScript循环实例
几个经典的循环案例: 1.一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米 var i=0; var h=0.0001; while(true){
二十三年蝉
2018/02/27
1.6K0
JavaScript循环实例
JavaScript 模块的循环加载
"循环加载"(circular dependency)指的是,a脚本的执行依赖b脚本,而b脚本的执行又依赖a脚本。 // a.js var b = require('b'); // b.js var
ruanyf
2018/04/12
1.4K0
JavaScript 模块的循环加载
JavaScript——循环语句
1. 循环语句的介绍 循环语句就是让一部分代码重复执行,javascript中常用的循环语句有: for while do-while 2. for循环 var array = [1, 4, 5]; for(var index = 0; index < array.length; index++){ result = array[index]; alert(result); } 3. while循环 var array = [1, 4, 5]; var index =
落雨
2022/04/28
26.9K0
电脑没声音?一招解决百分之九十以上的声音问题。
1、点击[此电脑] 2、点击[管理] 3、点击[设备管理器] 4、点击[声音、视频和游戏控制器] 5、点击[Realtek High Definition Audio] 6、点击[卸载设备] 7、点击[删除此设备的驱动程序] 8、点击[卸载]
裴来凡
2022/05/28
4020
电脑没声音?一招解决百分之九十以上的声音问题。
JavaScript 事件循环
「事件循环」 的概念非常简单。它是一个在JavaScript 引擎等待任务,执行任务和进入休眠状态等待更多任务这几个状态之间转换的无限循环。
用户8921923
2022/10/24
8590
理解 JavaScript 中的循环
所有这些表达式都有一个基本的功能:它们会重复一件事情直到一个具体的条件出现。在这篇文章中,我们将深入 for...of 表达式,去了解它是如何工作的,以及在我们的应用中可以使用它来优化代码的地方。
icepy
2019/06/24
1.1K0
JavaScript-For 循环和 While 循环
一个for循环会一直重复执行,直到指定的循环条件为fasle。 JavaScript的for循环和Java与C的for循环是很相似的。
WEBING
2019/02/26
1.5K0
JavaScript-For 循环和 While 循环
JavaScript while 循环
如果您已经阅读了前面那一章关于 for 循环的内容,您会发现 while 循环与 for 循环很像。
陈不成i
2021/07/16
4410
JavaScript 循环语句
for语句是循环命令的另一种形式,可以指定循环的起点、终点和终止条件。它的格式如下。
RiemannHypothesis
2022/10/06
4410
Javascript For循环中的重难点
如果大家有过Python的基础,一定知道python中的for循环。同理,javascript是Web的编程语言,所以javascript中也存在for循环。并且两者的作用也一样:如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。下面介绍JS中For循环的重难点。
算法与编程之美
2022/02/17
7610
点击加载更多

相似问题

VBA:不想重复一次以上的For循环

15

每个循环根据条件递增一次以上的循环变量

45

如何使用SoundPool播放32种以上的声音?

20

如何在JavaScript中循环声音?

11

每x秒播放一次声音(循环)

12
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文