teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップJavaScriptに関する質問p5.js マウスクリックで、複数の音楽ファイルを同時再生したいです。

編集履歴

質問編集履歴

2

2022/01/12 04:20

投稿

mia_flower
mia_flower

スコア66

test CHANGED
File without changes
test CHANGED
@@ -1,207 +1,118 @@
1
1
  ###実現したいこと
2
-
3
-
4
2
 
5
3
  p5.jsで、ボタンを押すと音が鳴るものを製作しています。
6
4
 
7
-
8
-
9
5
  白い円１の内側でマウスクリックした時、sound１、
10
-
11
6
  白い円２の内側でマウスクリックした時、sound２、
12
-
13
7
  白い円３の内側でマウスクリックした時、sound３が再生され、
14
-
15
-
16
8
 
17
9
  クリックする順番やタイミングに応じて音の重なり方の違いを楽しめるようなものにしたいと考えています。
18
10
 
19
11
 
20
12
 
21
13
 
14
+ ![イメージ説明](https://d1666c7av167g2.cloudfront.net/questions/2022-01-12/aaefb414-00d2-444c-a328-cdecb41a7ee0.png)
15
+
16
+ 現在、以下のようなコードを書いてみたところ、
17
+ mouseXの位置に関わらずクリックするだけで音が鳴ってしまいました。
22
18
 
23
19
 
24
-
25
-
26
-
27
-
28
-
29
- ![イメージ説明](3e66720a66d6fce598347cb11801068a.png)
30
-
31
-
32
-
33
- 現在、以下のようなコードを書いているのですが、
34
-
35
- mouseXの位置に関わらず、クリックするだけで音が再生されるようになってしまっています。
36
-
37
-
38
-
39
- 一回押すとsound1が再生され、2回押すとsound1とsound2、3回押すとsound1とsound2とsound3が鳴る状態です。
40
-
41
-
42
-
43
- mouseXの位置に応じて音を鳴らすにはどのようにしたらよろしいでしょうか。
20
+ どのようにしたらよろしいのでしょうか。
44
-
45
-
46
21
 
47
22
 
48
23
 
49
24
  ### 該当のソースコード
50
25
 
51
-
52
-
53
26
  ```p5.js
54
27
 
55
28
  let sound1;
29
+ let sound2;
30
+ let sound3;
31
+ let analyzer;
56
32
 
33
+ function preload() {//まずはファイルを読み込む
57
- let sound2;
34
+ sound1 = loadSound('./se01.wav');
35
+ sound2 = loadSound('./se02.wav');
36
+ sound3 = loadSound('./se03.wav');
37
+
38
+ }
58
39
 
40
+ function setup() {
41
+ createCanvas(windowWidth, windowHeight);
42
+ sound1.loop();//setupの中にかくのがポイント
43
+
44
+ analyzer = new p5.Amplitude();
45
+ analyzer.setInput(sound1);
46
+ analyzer.setInput(sound2);
47
+ analyzer.setInput(sound3);
48
+ }
49
+
50
+ function draw() {
51
+ blendMode(BLEND);
59
- let sound3;
52
+ background(0);
53
+ //ボタンとなる3つの白い円
54
+ fill( 242, 240, 235);
55
+ ellipse(340,345,60,60);
56
+ ellipse(640,345,60,60);
57
+ ellipse(940,345,60,60);
58
+
59
+ let rms = analyzer.getLevel();
60
+ print(rms);
61
+ console.log(`x:${mouseX}, y:${mouseY}`);//mouseの座標取得
62
+ blendMode(SCREEN);
63
+ if(sound1.isPlaying() == true){
64
+ fill(31, 127, 255);//ブルー
65
+ noStroke();
66
+ circle(340, 345, rms*width);//音の大きさに応じて円の大きさが変化
67
+ print(rms);
68
+ textSize(100);
69
+ text('1', 30, 50);
70
+ }
71
+
72
+ if(sound2.isPlaying() == true){
73
+ fill(242, 5, 116);//ピンク
74
+ noStroke();
75
+ circle(640, 345, rms*width);
76
+ textSize(100);
77
+ text('2', 60, 50);
78
+ }
79
+
80
+ if(sound3.isPlaying() == true){
81
+ fill(4, 157, 217);//水色
82
+ noStroke();
83
+ circle(940, 345, rms*width);
84
+ textSize(100);
85
+ text('3', 90, 50);
86
+ }
87
+ }
88
+
89
+ function mousePressed() {
90
+ if(sound1.isPlaying() == false && 310 <= mouseX <= 370) {
91
+ sound1.loop();
92
+ print("//////////////////演奏1");
93
+ }else if(sound2.isPlaying() == false && 610 <= mouseX <= 670){
94
+ sound2.loop();
95
+ print("//////////////////演奏2");
96
+ }else if(sound3.isPlaying() == false && 910 <= mouseX <= 970){
97
+ sound3.loop();
98
+ print("//////////////////演奏3");
99
+ }else{
100
+ print("演奏なし");
101
+ }
102
+ }
60
103
 
61
104
 
62
-
105
+ //音楽をストップ
63
- function preload() {//まずはファイルを読み込む
106
+ function keyPressed(){
64
-
107
+ if(key == "a"){
108
+ sound1.stop();
65
- sound1 = loadSound('./se01.wav');
109
+ }else if(key == "s"){
66
-
110
+ sound2.stop();
67
- sound2 = loadSound('./se02.wav');
111
+ }else if(key == "d"){
68
-
69
- sound3 = loadSound('./se03.wav');
112
+ sound3.stop();
70
-
113
+ }
71
-
72
-
73
114
  }
74
115
 
75
116
 
76
117
 
77
- function setup() {
78
-
79
- createCanvas(windowWidth, windowHeight);
80
-
81
- sound1.loop();//setupの中にかくのがポイント
82
-
83
- bgColor = color(0, 0, 255);
84
-
85
- analyzer = new p5.Amplitude();
86
-
87
- analyzer.setInput(sound1);
88
-
89
- analyzer.setInput(sound2);
90
-
91
- analyzer.setInput(sound3);
92
-
93
- }
94
-
95
-
96
-
97
- function draw() {
98
-
99
- background(0);
100
-
101
- //ボタンとなる3つの白い円
102
-
103
- fill( 242, 240, 235);
104
-
105
- ellipse(340,345,60,60);
106
-
107
- ellipse(640,345,60,60);
108
-
109
- ellipse(940,345,60,60);
110
-
111
-
112
-
113
- let rms = analyzer.getLevel();
114
-
115
- print(rms);
116
-
117
- console.log(`x:${mouseX}, y:${mouseY}`);//mouseの座標取得
118
-
119
-
120
-
121
- if(sound1.isPlaying() == true){
122
-
123
- fill(31, 127, 255);//ブルー
124
-
125
- noStroke();
126
-
127
- circle(340, 345, rms*width);//音の大きさに応じて円の大きさが変化
128
-
129
- print(rms);
130
-
131
- }
132
-
133
-
134
-
135
- if(sound2.isPlaying() == true){
136
-
137
- fill(242, 5, 116);//ピンク
138
-
139
- noStroke();
140
-
141
- circle(640, 345, rms*width);
142
-
143
- }
144
-
145
-
146
-
147
- if(sound3.isPlaying() == true){
148
-
149
- fill(4, 157, 217);//水色
150
-
151
- noStroke();
152
-
153
- circle(940, 345, rms*width);
154
-
155
- }
156
-
157
- }
158
-
159
-
160
-
161
-
162
-
163
- function mousePressed() {
164
-
165
- if(sound1.isPlaying() == false && 310 < mouseX < 370){
166
-
167
- sound1.loop();
168
-
169
- }else if(sound2.isPlaying() == false && 610 < mouseX < 670){
170
-
171
- sound2.loop();
172
-
173
- }else if(sound3.isPlaying() == false && 910 < mouseX < 970){
174
-
175
- sound3.loop();
176
-
177
- }
178
-
179
- }
180
-
181
-
182
-
183
- //音楽をストップ
184
-
185
- function keyPressed(){
186
-
187
- if(key == "a"){
188
-
189
- sound1.stop();
190
-
191
- }else if(key == "s"){
192
-
193
- sound2.stop();
194
-
195
- }else if(key == "d"){
196
-
197
- sound3.stop();
198
-
199
- }
200
-
201
- }
202
-
203
-
204
-
205
-
206
-
207
118
  ```
JavaScript
JavaScript

1

コードに誤りを見つけた為、修正致しました。

2022/01/11 09:21

投稿

mia_flower
mia_flower

スコア66

test CHANGED
File without changes
test CHANGED
@@ -30,19 +30,17 @@
30
30
 
31
31
 
32
32
 
33
- 現在、以下のようなコードを書いてみたところ、2点問題が発生してしまいました。
33
+ 現在、以下のようなコードを書いているのですが、
34
-
35
-
36
-
34
+
37
- ・mouseXの位置に関わらず音が鳴ってしまう。
35
+ mouseXの位置に関わらず、クリックするだけで音が再生されるようになってしまっています。
38
-
36
+
37
+
38
+
39
- ・sound１のみしか再生されない。
39
+ 一回押すとsound1が再生され、2回押すとsound1とsound2、3回押すとsound1とsound2とsound3が鳴る状態です。
40
-
41
-
42
-
40
+
41
+
42
+
43
- どのようにしたらよろしいのでしょうか。
43
+ mouseXの位置に応じて音を鳴らすにはどのようにしたらよろしいでしょうか。
44
-
45
-
46
44
 
47
45
 
48
46
 
@@ -160,26 +158,24 @@
160
158
 
161
159
 
162
160
 
161
+
162
+
163
163
  function mousePressed() {
164
164
 
165
- if(sound1.isPlaying() == false){
165
+ if(sound1.isPlaying() == false && 310 < mouseX < 370){
166
-
167
- if(310 < mouseX < 370){
168
166
 
169
167
  sound1.loop();
170
168
 
171
- }else if(610 < mouseX < 670){
169
+ }else if(sound2.isPlaying() == false && 610 < mouseX < 670){
172
170
 
173
171
  sound2.loop();
174
172
 
175
- }else if(910 < mouseX < 970){
173
+ }else if(sound3.isPlaying() == false && 910 < mouseX < 970){
176
174
 
177
175
  sound3.loop();
178
176
 
179
177
  }
180
178
 
181
- }
182
-
183
179
  }
184
180
 
185
181