質問編集履歴

1

質問に不要な情報を修正し読みやすくしました。

2021/06/14 04:24

投稿

707
707

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,130 +1,18 @@
1
- 以下の条件を満たすことは可能でしょうか?それは、どのように書けばよいのでしょうか?
1
+ 以下の条件を満たすことは可能でしょうか?
2
-
3
-
4
2
 
5
3
  [1]HTMLファイルに音声データをJavaScriptで直接書く
6
4
 
7
5
  [2][1]のデータを参照してHTML Audioで音声を再生する
8
6
 
9
-
10
-
11
- 私は、この条件を満たすために、以下のように書きましたが、うまくいきませんでした。
12
-
13
-
14
-
15
7
  ```html
16
8
 
17
- <html><head><title>SquareWaveTest</title><head>
18
-
19
-
20
-
21
- <body>
22
-
23
-
24
-
25
- <script>
26
-
27
-
28
-
29
- function square_wav_440hz(){
9
+ function audio1(){
30
10
 
31
11
  let bf = new ArrayBuffer(448);
32
12
 
33
13
  let dv = new DataView(bf);
34
14
 
35
- let ad = 1;
36
-
37
- for ( let i = 0; i < 44; i++ ) {
15
+ // 音声データを書く
38
-
39
- dv.setUint8(i, parseInt("00", 16));
40
-
41
- }
42
-
43
- dv.setUint8(0, parseInt("52", 16));
44
-
45
- dv.setUint8(1, parseInt("49", 16));
46
-
47
- dv.setUint8(2, parseInt("46", 16));
48
-
49
- dv.setUint8(3, parseInt("46", 16));
50
-
51
- dv.setUint8(4, parseInt("10", 16));
52
-
53
- dv.setUint8(5, parseInt("02", 16));
54
-
55
- dv.setUint8(8, parseInt("57", 16));
56
-
57
- dv.setUint8(9, parseInt("41", 16));
58
-
59
- dv.setUint8(10, parseInt("56", 16));
60
-
61
- dv.setUint8(11, parseInt("45", 16));
62
-
63
- dv.setUint8(12, parseInt("66", 16));
64
-
65
- dv.setUint8(13, parseInt("6D", 16));
66
-
67
- dv.setUint8(14, parseInt("74", 16));
68
-
69
- dv.setUint8(15, parseInt("20", 16));
70
-
71
- dv.setUint8(16, parseInt("10", 16));
72
-
73
- dv.setUint8(20, parseInt("01", 16));
74
-
75
- dv.setUint8(22, parseInt("02", 16));
76
-
77
- dv.setUint8(24, parseInt("44", 16));
78
-
79
- dv.setUint8(25, parseInt("AC", 16));
80
-
81
- dv.setUint8(28, parseInt("10", 16));
82
-
83
- dv.setUint8(29, parseInt("B1", 16));
84
-
85
- dv.setUint8(30, parseInt("02", 16));
86
-
87
- dv.setUint8(32, parseInt("04", 16));
88
-
89
- dv.setUint8(34, parseInt("10", 16));
90
-
91
- dv.setUint8(36, parseInt("64", 16));
92
-
93
- dv.setUint8(37, parseInt("61", 16));
94
-
95
- dv.setUint8(38, parseInt("74", 16));
96
-
97
- dv.setUint8(39, parseInt("61", 16));
98
-
99
- dv.setUint8(40, parseInt("94", 16));
100
-
101
- dv.setUint8(41, parseInt("01", 16));
102
-
103
- ad = 44;
104
-
105
- for ( let i = 0; i < 102; i++ ) {
106
-
107
- dv.setUint8(ad, parseInt("27", 16));
108
-
109
- ad = ad + 1;
110
-
111
- dv.setUint8(ad, parseInt("40", 16));
112
-
113
- ad = ad + 1;
114
-
115
- }
116
-
117
- for ( let i = 0; i < 100; i++ ) {
118
-
119
- dv.setUint8(ad, parseInt("D9", 16));
120
-
121
- ad = ad + 1;
122
-
123
- dv.setUint8(ad, parseInt("BF", 16));
124
-
125
- ad = ad + 1;
126
-
127
- }
128
16
 
129
17
  let blob = new Blob([bf], {type: "audio/wav"}),
130
18
 
@@ -134,84 +22,14 @@
134
22
 
135
23
  };
136
24
 
137
- let url = square_wav_440hz();
25
+ let url=audio1();
138
26
 
139
- let square_wav = new Audio();
27
+ let audio2=new Audio();
140
28
 
141
- square_wav.src = "url";
29
+ audio2.src = "url";
142
30
 
143
- square_wav.loop = true;
31
+ audio2.loop = true;
144
-
145
-
146
-
147
- </script>
148
-
149
-
150
-
151
- <button onclick="square_wav.play()"> Square wave </button>
152
-
153
-
154
-
155
- <!--上記のボタンをクリックすると以下のエラーメッセージが返ってきます。
156
-
157
- Uncaught (in promise) DOMException: The media resource indicated by the src attribute or assigned media provider object was not suitable.
158
-
159
- -->
160
-
161
-
162
-
163
- <audio src="url" type="audio/wav" loop="true" controls>
164
-
165
- </audio>
166
-
167
-
168
-
169
- <!--上記だとエラーメッセージは返ってきませんが、コントロールの再生ボタンをクリックしても音が鳴りません。-->
170
-
171
-
172
-
173
- <audio src="square.wav" type="audio/wav" loop="true" controls>
174
-
175
- </audio>
176
-
177
-
178
-
179
- <!--上記はコントロールの再生ボタンのクリックで音が鳴ります。これは正しいパスに正しい音声ファイルのsquare.wavが存在するためです。-->
180
-
181
-
182
-
183
- </body>
184
-
185
-
186
-
187
- </html>
188
32
 
189
33
  ```
190
34
 
191
-
192
-
193
- おそらく、square_wav_440hz()自体は正常に音声ファイルを生成しています。
194
-
195
-
196
-
197
- それは、square_wav_440hz()で取得したurlをダウンロードし、square.wavとコンペアした結果が同一の内容だったからです。
198
-
199
-
200
-
201
- また、このバッファはWebAudioAPI経由であれば問題なく再生されました。
202
-
203
-
204
-
205
- 私は、エラーメッセージにもあるように、srcに指定しているものが正しくないのが原因だと考え、FetchやXMLHttpRequestなどの正しい使い方を学習している途中なのですが、
206
-
207
-
208
-
209
- 「そもそもこの条件を満たすことは可能なのか?」
210
-
211
-
212
-
213
- という疑問を払拭できず、こちらで質問させていただくに至りました。
214
-
215
-
216
-
217
- もしご存知の方いらっしゃいましたら、よろしくお願いいたします
35
+ よろしくお願いします