回答編集履歴
10
誤字修正
answer
CHANGED
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
---- 追記----
|
|
121
121
|
質問のコードをいじってたら、何がやりたいのかわかりました。
|
|
122
122
|
`<!--ランダムに表示する処理-->`の中に入っているスクリプトの`$(function(){}`は、domを読み終わってからの処理にする必要がないので不要です。
|
|
123
|
-
同じスクリプトの中の、`for(i=0; i< 1; i++){}`は、配列がすでにランダムになっていますので、[0]だけ取り出せばいいので、`$("#random").append('<div>' + arr[0] +'</div>');`とか着替えることができます。
|
|
123
|
+
同じスクリプトの中の、`for(i=0; i< 1; i++){}`は、配列がすでにランダムになっていますので、[0]だけ取り出せばいいので、`$("#random").append('<div>' + arr[0] +'</div>');`と~~か着替える~~書き換えることができます。
|
|
124
124
|
これで毎回、書き換えられ、波形も同じものが表示されます。
|
|
125
125
|
|
|
126
126
|
```html
|
9
修正 ちょい修正
answer
CHANGED
|
@@ -172,7 +172,7 @@
|
|
|
172
172
|
$("#random").append('<div>' + arr[0] +'</div>');//---- 配列の[0]だけをappendして表示
|
|
173
173
|
/*----- ここ付け足し -----*/
|
|
174
174
|
console.log(arr[0]);//ログ出力
|
|
175
|
-
audFile = $(arr[0]).eq(4)[0].getAttribute("src");//------------------------------ここで
|
|
175
|
+
var audFile = $(arr[0]).eq(4)[0].getAttribute("src");//------------------------------ここで変数に入れる
|
|
176
176
|
console.log(audFile);//ログ出力
|
|
177
177
|
</script>
|
|
178
178
|
|
|
@@ -204,8 +204,6 @@
|
|
|
204
204
|
</button>
|
|
205
205
|
</div>
|
|
206
206
|
|
|
207
|
-
|
|
208
|
-
|
|
209
207
|
<script language="JavaScript">
|
|
210
208
|
var wavesurfer = WaveSurfer.create({
|
|
211
209
|
barWidth: '1',
|
8
追記
answer
CHANGED
|
@@ -114,5 +114,112 @@
|
|
|
114
114
|
|
|
115
115
|
</body>
|
|
116
116
|
</html>
|
|
117
|
+
```
|
|
117
118
|
|
|
119
|
+
|
|
120
|
+
---- 追記----
|
|
121
|
+
質問のコードをいじってたら、何がやりたいのかわかりました。
|
|
122
|
+
`<!--ランダムに表示する処理-->`の中に入っているスクリプトの`$(function(){}`は、domを読み終わってからの処理にする必要がないので不要です。
|
|
123
|
+
同じスクリプトの中の、`for(i=0; i< 1; i++){}`は、配列がすでにランダムになっていますので、[0]だけ取り出せばいいので、`$("#random").append('<div>' + arr[0] +'</div>');`とか着替えることができます。
|
|
124
|
+
これで毎回、書き換えられ、波形も同じものが表示されます。
|
|
125
|
+
|
|
126
|
+
```html
|
|
127
|
+
<!DOCTYPE html>
|
|
128
|
+
<html>
|
|
129
|
+
<head>
|
|
130
|
+
<link href="style.css" rel="stylesheet" type="text/css"/>
|
|
131
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
132
|
+
|
|
133
|
+
<title>英語発音矯正</title>
|
|
134
|
+
<meta name="Description" content="英語発音矯正に向けたWebサイト" />
|
|
135
|
+
<meta name="Keywords" content="英語,発音,Webサイト,HTML,発音矯正,英語発音" />
|
|
136
|
+
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
|
|
137
|
+
|
|
138
|
+
<script type="text/javascript">google.load("jquery","1.7");</script>
|
|
139
|
+
</head>
|
|
140
|
+
<body>
|
|
141
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
<h2>英語発音矯正に向けたWebサイト</h2>
|
|
145
|
+
<div id="center">
|
|
146
|
+
<div id="wrapper">
|
|
147
|
+
<p>ランダムで単語を表示</p><br>
|
|
148
|
+
|
|
149
|
+
<!--ランダムで表示する単語-->
|
|
150
|
+
<div id="random">
|
|
151
|
+
<div><p><span class="red">サイ</span>トスィーイング</p><p>S<span class="red">igh</span>tsheeing</p><p>観光</p><p>sáitsìːiŋ</p><audio src="voice/sightseeing.mp3" controls alt=""></div>
|
|
152
|
+
<div><p><span class="red">エア</span>ポート</p><p><span class="red">Air</span>port</p><p>空港</p><p> éəpɔ`ːt</p><audio src="voice/airport.mp3" controls alt="何か"></div>
|
|
153
|
+
<div><p>アカモ<span class="red">デイ</span>ション</p><p>Accommo<span class="red">da</span>tion</p><p>宿泊施設</p><p>əkɑ`mədéiʃən</p><audio src="voice/accommodation.mp3" controls alt="何か"></div>
|
|
154
|
+
<div><p>ディ<span class="red">レ</span>クション</p><p>Di<span class="red">re</span>ction</p><p>方向、方角</p><p>dirékʃən</p><audio src="voice/direction.mp3" controls alt="何か"></div>
|
|
155
|
+
</div><!--random-->
|
|
156
|
+
</div><!--wrapper-->
|
|
157
|
+
<br>
|
|
158
|
+
|
|
159
|
+
<!--ランダムに表示する処理-->
|
|
160
|
+
<script type="text/javascript">
|
|
161
|
+
var arr = [];
|
|
162
|
+
// randomの中にある要素を、push()で要素の中身を配列に追加します。
|
|
163
|
+
$("#random div").each(function(){
|
|
164
|
+
arr.push($(this).html());
|
|
165
|
+
});
|
|
166
|
+
//sort()とMath.random()を使ってランダムに並び替えます。
|
|
167
|
+
arr.sort(function(){
|
|
168
|
+
return Math.random() - Math.random();
|
|
169
|
+
});
|
|
170
|
+
// 並び替えた後は、randomの中身を空にする。
|
|
171
|
+
$("#random").empty();
|
|
172
|
+
$("#random").append('<div>' + arr[0] +'</div>');//---- 配列の[0]だけをappendして表示
|
|
173
|
+
/*----- ここ付け足し -----*/
|
|
174
|
+
console.log(arr[0]);//ログ出力
|
|
175
|
+
audFile = $(arr[0]).eq(4)[0].getAttribute("src");//------------------------------ここでグローバル変数に入れる
|
|
176
|
+
console.log(audFile);//ログ出力
|
|
177
|
+
</script>
|
|
178
|
+
|
|
179
|
+
</div>
|
|
180
|
+
|
|
181
|
+
<!--更新ボタンの処理-->
|
|
182
|
+
<form>
|
|
183
|
+
<input type="button" class="btn_btn" value="更新" onclick="koshin()">
|
|
184
|
+
</form>
|
|
185
|
+
<p>更新ボタンを押して様々な単語を発音して正しい発音を身に付けましょう</p>
|
|
186
|
+
<br>
|
|
187
|
+
<script>
|
|
188
|
+
function koshin(){
|
|
189
|
+
location.reload();
|
|
190
|
+
}
|
|
191
|
+
</script>
|
|
192
|
+
|
|
193
|
+
<br><br><h4>正しい音声の波形です</h4>
|
|
194
|
+
|
|
195
|
+
<!--波形の処理-->
|
|
196
|
+
<div id="waveform"></div>
|
|
197
|
+
<div class="controls">
|
|
198
|
+
<button class="btn btn-primary" onclick="wavesurfer.playPause()">
|
|
199
|
+
<i class="glyphicon glyphicon-play"></i>
|
|
200
|
+
Play
|
|
201
|
+
/
|
|
202
|
+
<i class="glyphicon glyphicon-pause"></i>
|
|
203
|
+
Pause
|
|
204
|
+
</button>
|
|
205
|
+
</div>
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
<script language="JavaScript">
|
|
210
|
+
var wavesurfer = WaveSurfer.create({
|
|
211
|
+
barWidth: '1',
|
|
212
|
+
audioRate: '0.6',
|
|
213
|
+
container: '#waveform',
|
|
214
|
+
waveColor: 'red',
|
|
215
|
+
progressColor: 'purple',
|
|
216
|
+
height: '50'
|
|
217
|
+
});
|
|
218
|
+
console.log(audFile);//ログ出力
|
|
219
|
+
wavesurfer.load(audFile);//------- ここ書き換え
|
|
220
|
+
|
|
221
|
+
</script>
|
|
222
|
+
|
|
223
|
+
</body>
|
|
224
|
+
</html>
|
|
118
225
|
```
|
7
修正 ちょい修正
answer
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
`<div id="random">`の中に入っている`<audio>`のsrc属性を取りたいということでしたら、`arr[i]`からこのようにして取り出すことができます。
|
|
2
2
|
|
|
3
3
|
```javascript
|
|
4
|
-
var data = $(arr[i]).eq(4)[0].src;
|
|
5
|
-
var baseURI = $(arr[i]).eq(4)[0].baseURI;
|
|
6
|
-
audFile =
|
|
4
|
+
audFile = $(arr[i]).eq(4)[0].getAttribute("src");//グローバル変数 audFileに入れる
|
|
7
5
|
```
|
|
8
6
|
|
|
9
7
|
ただ、`$(function(){`の中に入っちゃっているので、`wavesurfer.load()`の部分が先に表示されているのでタイミング的に参照できません。
|
6
修正 ちょい修正
answer
CHANGED
|
@@ -65,6 +65,7 @@
|
|
|
65
65
|
$("#random").append('<div>' + arr[i] +'</div>');
|
|
66
66
|
}
|
|
67
67
|
/*----- ここ付け足し -----*/
|
|
68
|
+
console.log(arr[i]);
|
|
68
69
|
audFile = $(arr[i]).eq(4)[0].getAttribute("src");//------------------------------ここでグローバル変数に入れる
|
|
69
70
|
console.log(audFile);
|
|
70
71
|
/*----- ここまで付け足し -----*/
|
5
修正 ちょい修正
answer
CHANGED
|
@@ -47,7 +47,6 @@
|
|
|
47
47
|
|
|
48
48
|
<!--ランダムに表示する処理-->
|
|
49
49
|
<script type="text/javascript">
|
|
50
|
-
//var audFile = '';//---------------------------------グローバル変数として定義
|
|
51
50
|
$(function(){
|
|
52
51
|
var arr = [];
|
|
53
52
|
// randomの中にある要素を、push()で要素の中身を配列に追加します。
|
|
@@ -66,9 +65,7 @@
|
|
|
66
65
|
$("#random").append('<div>' + arr[i] +'</div>');
|
|
67
66
|
}
|
|
68
67
|
/*----- ここ付け足し -----*/
|
|
69
|
-
var data = $(arr[i]).eq(4)[0].src;
|
|
70
|
-
var baseURI = $(arr[i]).eq(4)[0].baseURI;//---------baseURI
|
|
71
|
-
audFile =
|
|
68
|
+
audFile = $(arr[i]).eq(4)[0].getAttribute("src");//------------------------------ここでグローバル変数に入れる
|
|
72
69
|
console.log(audFile);
|
|
73
70
|
/*----- ここまで付け足し -----*/
|
|
74
71
|
});
|
4
修正
answer
CHANGED
|
@@ -66,9 +66,9 @@
|
|
|
66
66
|
$("#random").append('<div>' + arr[i] +'</div>');
|
|
67
67
|
}
|
|
68
68
|
/*----- ここ付け足し -----*/
|
|
69
|
-
var data = $(arr[i]).eq(4)[0].src;
|
|
69
|
+
var data = $(arr[i]).eq(4)[0].src;
|
|
70
70
|
var baseURI = $(arr[i]).eq(4)[0].baseURI;//---------baseURI
|
|
71
|
-
audFile = data.replace(baseURI,'');
|
|
71
|
+
audFile = data.replace(baseURI,'');//------------------------------ここでグローバル変数に入れる
|
|
72
72
|
console.log(audFile);
|
|
73
73
|
/*----- ここまで付け足し -----*/
|
|
74
74
|
});
|
3
修正 ちょい修正
answer
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
なので、波形表示部分も`$(function(){`で囲っちゃえば取り出せるかと思います。
|
|
12
12
|
|
|
13
|
-
もう少しスマートなやり方があるかもしれませんが、これで
|
|
13
|
+
もう少しスマートなやり方があるかもしれませんが、これで該当部分の取得はできるんじゃないかなぁ。
|
|
14
14
|
|
|
15
15
|
```html
|
|
16
16
|
<!DOCTYPE html>
|
2
修正
answer
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
audFile = data.replace(baseURI,'');//グローバル変数 audFileに入れる
|
|
7
7
|
```
|
|
8
8
|
|
|
9
|
-
ただ、`$(function(){`の中に入っちゃっているので、
|
|
9
|
+
ただ、`$(function(){`の中に入っちゃっているので、`wavesurfer.load()`の部分が先に表示されているのでタイミング的に参照できません。
|
|
10
10
|
|
|
11
11
|
なので、波形表示部分も`$(function(){`で囲っちゃえば取り出せるかと思います。
|
|
12
12
|
|
1
修正
answer
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
audFile = data.replace(baseURI,'');//グローバル変数 audFileに入れる
|
|
7
7
|
```
|
|
8
8
|
|
|
9
|
-
ただ、`$(function(){`の中に入っちゃっているので、波形表示の部分で
|
|
9
|
+
ただ、`$(function(){`の中に入っちゃっているので、波形表示の部分が先に表示されているのでタイミング的に参照できません。
|
|
10
10
|
|
|
11
11
|
なので、波形表示部分も`$(function(){`で囲っちゃえば取り出せるかと思います。
|
|
12
12
|
|