質問編集履歴
7
試してみた事の追加。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -262,4 +262,10 @@
|
|
|
262
262
|
|
|
263
263
|
};
|
|
264
264
|
|
|
265
|
+
|
|
266
|
+
|
|
267
|
+
■HTML側
|
|
268
|
+
|
|
269
|
+
<div id="sound" class="type">タイプライター音がこのDIVが終わったら止まって欲しい。</div>
|
|
270
|
+
|
|
265
|
-
```
|
|
271
|
+
```
|
6
URLのミスの修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -248,7 +248,7 @@
|
|
|
248
248
|
|
|
249
249
|
// サウンドを読み込む
|
|
250
250
|
|
|
251
|
-
getAudioBuffer('
|
|
251
|
+
getAudioBuffer('typewriter.mp3', function(buffer) {
|
|
252
252
|
|
|
253
253
|
//
|
|
254
254
|
|
5
試してみた事の追加。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -146,18 +146,120 @@
|
|
|
146
146
|
|
|
147
147
|
### 試したこと
|
|
148
148
|
|
|
149
|
-
|
|
149
|
+
代案として「typewriter.js」というものを作ってmp3を読み込んでみました。
|
|
150
|
-
|
|
150
|
+
|
|
151
|
-
t
|
|
151
|
+
t.jsのクラスをいれている部分が動くと同時に流す事も出来ました。
|
|
152
|
+
|
|
152
|
-
|
|
153
|
+
しかし流れ続けてしまい、t.jsが終わった後どうやって止めたらいいかに悩んでいます。
|
|
154
|
+
|
|
153
|
-
|
|
155
|
+
こちらは代案なので、元々の変更が出来れば一番ではあります。
|
|
154
|
-
|
|
155
|
-
|
|
156
|
+
|
|
156
|
-
|
|
157
|
-
```
|
|
157
|
+
```
|
|
158
|
+
|
|
158
|
-
|
|
159
|
+
/*
|
|
160
|
+
|
|
161
|
+
* typewriter.js
|
|
162
|
+
|
|
163
|
+
*/
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
159
|
-
|
|
167
|
+
window.AudioContext = window.AudioContext || window.webkitAudioContext;
|
|
168
|
+
|
|
160
|
-
|
|
169
|
+
var context = new AudioContext();
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
// Audio 用の buffer を読み込む
|
|
174
|
+
|
|
175
|
+
var getAudioBuffer = function(url, fn) {
|
|
176
|
+
|
|
177
|
+
var req = new XMLHttpRequest();
|
|
178
|
+
|
|
179
|
+
// array buffer を指定
|
|
180
|
+
|
|
181
|
+
req.responseType = 'arraybuffer';
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
req.onreadystatechange = function() {
|
|
186
|
+
|
|
187
|
+
if (req.readyState === 4) {
|
|
188
|
+
|
|
189
|
+
if (req.status === 0 || req.status === 200) {
|
|
190
|
+
|
|
191
|
+
// array buffer を audio buffer に変換
|
|
192
|
+
|
|
193
|
+
context.decodeAudioData(req.response, function(buffer) {
|
|
194
|
+
|
|
195
|
+
// コールバックを実行
|
|
196
|
+
|
|
197
|
+
fn(buffer);
|
|
198
|
+
|
|
199
|
+
});
|
|
200
|
+
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
};
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
req.open('GET', url, true);
|
|
210
|
+
|
|
211
|
+
req.send('');
|
|
212
|
+
|
|
213
|
+
};
|
|
214
|
+
|
|
215
|
+
|
|
216
|
+
|
|
217
|
+
// サウンドを再生
|
|
218
|
+
|
|
219
|
+
var playSound = function(buffer) {
|
|
220
|
+
|
|
221
|
+
// source を作成
|
|
222
|
+
|
|
223
|
+
var source = context.createBufferSource();
|
|
224
|
+
|
|
225
|
+
// buffer をセット
|
|
226
|
+
|
|
227
|
+
source.buffer = buffer;
|
|
228
|
+
|
|
229
|
+
// context に connect
|
|
230
|
+
|
|
231
|
+
source.connect(context.destination);
|
|
232
|
+
|
|
233
|
+
// 再生
|
|
234
|
+
|
|
235
|
+
source.start(0);
|
|
236
|
+
|
|
237
|
+
// ループ
|
|
238
|
+
|
|
239
|
+
source.loop = true;
|
|
240
|
+
|
|
241
|
+
};
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
|
|
245
|
+
// main
|
|
246
|
+
|
|
247
|
+
window.onload = function() {
|
|
248
|
+
|
|
249
|
+
// サウンドを読み込む
|
|
250
|
+
|
|
251
|
+
getAudioBuffer('/scenario/kks/typewriter.mp3', function(buffer) {
|
|
252
|
+
|
|
253
|
+
//
|
|
254
|
+
|
|
255
|
+
var id = "sound";
|
|
256
|
+
|
|
257
|
+
// サウンドを再生
|
|
258
|
+
|
|
259
|
+
playSound(buffer);
|
|
260
|
+
|
|
261
|
+
});
|
|
262
|
+
|
|
263
|
+
};
|
|
264
|
+
|
|
161
|
-
```
|
|
265
|
+
```
|
|
162
|
-
|
|
163
|
-
この辺りなのかとは思っているのですが…。
|
4
タイトルの修正と「知りたい事」の追加。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
タイプライター風「t.js」のbeep音を変更したい
|
|
1
|
+
タイプライター風「t.js」のbeep音を変更したい【もしくは追加】
|
test
CHANGED
|
@@ -36,15 +36,55 @@
|
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
|
|
39
|
-
###
|
|
39
|
+
### 知りたい事
|
|
40
40
|
|
|
41
41
|
|
|
42
42
|
|
|
43
|
+
「beep」音というものがとても苦痛で、使用できないのが現状です。
|
|
44
|
+
|
|
45
|
+
大元のjsファイルの修正ではなく、今あるHTMLのソースコードに
|
|
46
|
+
|
|
47
|
+
記載を追加する方法での「mp3」あるいは「wav」の音を鳴らすというのは可能なのでしょうか？
|
|
48
|
+
|
|
49
|
+
下記のような内容を参考に出来ないかどうか考えているのですが
|
|
50
|
+
|
|
51
|
+
「.type」と一緒に「鳴らす、ループ、処理が終われば止まる」が出来れば幸いです。
|
|
52
|
+
|
|
43
53
|
```
|
|
44
54
|
|
|
55
|
+
$('#play').bind('touchstart', function() {
|
|
56
|
+
|
|
57
|
+
var audio = new Audio('sound.mp3');
|
|
58
|
+
|
|
59
|
+
audio.load();
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
audio.addEventListener('canplaythrough', function() {
|
|
64
|
+
|
|
65
|
+
audio.play();
|
|
66
|
+
|
|
45
|
-
|
|
67
|
+
//同時に動かしたいアニメーションの処理
|
|
68
|
+
|
|
69
|
+
$('#keyvisual').fadeIn(2000);
|
|
70
|
+
|
|
71
|
+
}, false);
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
audio.addEventListener("ended", function() {
|
|
76
|
+
|
|
77
|
+
audio.play();
|
|
78
|
+
|
|
79
|
+
}, false);
|
|
80
|
+
|
|
81
|
+
});
|
|
46
82
|
|
|
47
83
|
```
|
|
84
|
+
|
|
85
|
+
こういった音の記載を探すと「ボタンを押して鳴らす」ものが多く、
|
|
86
|
+
|
|
87
|
+
t.jsと一緒に自動起動させるにはどうしたらいいか…という部分でも悩んでいます。
|
|
48
88
|
|
|
49
89
|
|
|
50
90
|
|
|
@@ -100,17 +140,7 @@
|
|
|
100
140
|
|
|
101
141
|
|
|
102
142
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
```JS側
|
|
108
|
-
|
|
109
|
-
/*t.js-1.5.4;(c)2014-2019 - Mntn(r) <https://mn.tn/> c/o Benjamin Lips <g--[AT]--mn.tn>;MIT-Licensed <https://mit-license.org/>;For documentation, see <https://mntn-dev.github.io/t.js/>*/
|
|
110
|
-
|
|
111
|
-
;(function(c){c.fn.t=function(k,J){return this.each(function(){if(k=='queue')return(c(this).q(J));var a=J,l=k,b=c(this),r=b,w,m,u,n,x,y=-1,p=!1,B=0,D=0,E=-1,z="12qwertyuiop[]asdfghjkl;zxcvbnm,./~!@#$%^&*()_+:1234567890-=op".split([]),e=function(a,b){return c.type(a)[0]==(b||"n")},F=function(){_g=c.grep(g,function(a){return"&"==a[0]||!a[1]}).length-1;return-1<_g?_g:0},A=function(b){E!=b&&a.blink&&(a.blink_perm||r.data("blinking",E=b?1:0))},f={c:0,beep:function(){0==f.c&&(f.c=c("html").data().__TAC);f.o&&f.o.stop();f.o=f.c.createOscillator();f.o.frequency.setValueAtTime(1,f.c.currentTime);f.g=f.c.createGain();f.o.connect(f.g);f.g.connect(f.c.destination);f.o.start();f.o.stop(f.c.currentTime+.03)}};if("beep"==l&&!b.data().is_typing&&c("html").data().__TAC)return f.beep(),this;if("speed"==l&&e(a)&&9<a)return b.data("speed",a).data("blink",Math.max(100,a+b.data().ssbs)),this;""===l&&(l="<del>*</del>");if(b.data().is_typing)return l=="paused".slice(0,-1)&&(b.data("paused",e(a,"b")?oo_=a:b.data("paused")?oo_=!1:oo_=!0),b.data().blink&&b.data("blinking",oo_)),this;if(l=="paused".slice(0,-1))return this;b.data("is_typing",1);e(l,"o")&&(a=l);if(/t\-/.test(b.attr("class")))return this;if("add"==l&&b.data().t){var t=a;a=c.extend({},b.data());var G=b=c(":first",b),H=e(a.typing,"f");t="<"+a.tag+' class="typing-add">'+t+"</"+a.tag+">"}else{"add"==l&&(l=a,a={});a=c.extend({t:!0,delay:!1,speed:50,speed_vary:!1,caret:"\u258e",tag:"span",blink:!0,beep:!1,blink_perm:!1,repeat:-3,pause_on_click:!1,pause_on_tab_switch:0,wrap:!1,mistype:!1,locale:"en",init:!1,typing:!1,fin:!1},a?a:b.data());t=x=!1;var d,I;b.data().t||(b.wrapInner(c("<"+a.tag+"/>",{"class":"t-container",style:"top:auto;bottom:auto;"})),/^[ar]/.test(b.css("position"))||b.css({position:"relative"}),b.css({overflow:"hidden"}));a.wrap&&!b.parent().data().t_wrap&&(b.wrap(c("<div/>",/[.#]/.test(a.wrap[0])?"#"==a.wrap[0]?{id:a.wrap.substr(1)}:{"class":a.wrap.substr(1)}:{style:a.wrap})),b.parent().data("t_wrap",1));e(a.beep,"b")||(a.beep=!1);!0===a.beep&&e(c("html").data().__TAC,"u")&&(c("html").data("__TAC",__TAC=(window.AudioContext=window.AudioContext||window.webkitAudioContext)?new AudioContext:!1),__TAC||(a.beep=!1));!1===a.repeat&&(a.repeat=-3);!0===a.blink&&(a.blink=3*a.speed);e(a.blink)&&100>a.blink&&(a.blink=100);!0===a.caret&&(a.caret="\u258e");e(a.caret,"s")&&!c(".t-caret",b)[0]&&(!e(a.blink)&&(a.blink=!1),x=c("<"+a.tag+"/>",{"class":"t-caret",html:a.caret}).appendTo(b),a.blink&&b.append("\u200b")&&b.data("bi",setInterval(function(){if(0==r.length)return clearInterval(r.data("bi"));++D>=r.data().blink/10&&(D=0,(r.data().blinking|(v="h"==x.css("visibility")[0])||a.blink_perm)&&x.css({visibility:v?"visible":"hidden"}))},10)));a.blink||b.data().bi&&clearInterval(b.data().bi)&&b.removeData("bi");!e(a.blink_perm,"b")&&(a.blink_perm=!0);a.speed=!e(a.speed)||10>a.speed?10:a.speed;a.speed_vary&&(a.speed/=2.5);1<a.mistype||(a.mistype=!1);a.ssbs=Math.abs(a.blink-a.speed);b.data(a);c(".typing-0",b).replaceWith(function(){return this.childNodes});c(".typing-add",b).remove();G=b=c(":first",b);var g=e(l,"s")?l:b.html();""==g&&(g="\u200b");b.empty();r.show().css({visibility:"visible"});e(a.delay)&&0<a.delay&&(d=~~(1E3*a.delay/a.speed))&&a.blink_perm||A(1);H=e(a.typing,"f");!0===a.pause_on_click&&b.parent().off("click").click(function(a){"1"!=c(a.target).data().click&&c(this).t("pause")});!0===a.pause_on_tab_switch?e(c("html").data().__TAB,"u")&&(c("html").data("__TAB",1),c(document).on("visibilitychange",function(){c(".t-container").parent().each(function(){h=c(document).attr("visibilityState").charAt(0);"h"==h&&c(this).data().paused&&c(this).data("keep_paused",1);c(this).p("h"==h?!0:c(this).data().keep_paused&&c(this).removeData("keep_paused")?!0:!1)})})):!1===a.pause_on_tab_switch&&c("html").data().__TAB&&(c("html").removeData("__TAB"),c(document).off("visibilitychange"))}/<kbd.*?>/i.test(g=String(t||g))&&b.parent().data("kbd",j_=1)&&b.parent().data("mistype",b.parent().data("mistype")?_j=b.parent().data().mistype:_j=10)&&(a.mistype=_j)&&(a.kbd=j_?j_:!1);g=g.replace(/(.*?)[\u200b]+$/,"$1").replace(/<!\-\-([\s\S]+?)\-\->/g,"$1").replace(/<ins>([^0-9])</ins>/g,"$1").replace(/<(embed|command|col|wbr|img|br|input|hr|area|source|track|keygen|param)(.*?)[/]?>/g,"<#$1$2/>").replace(/<ins>\s*(\d*[.]?\d*)\s*(</ins>)/g,'<ins data-ins="$1"></ins>').replace(/<ins(.*?)>([\s\S]*?)(</ins>)/g,function(a,b,c){return"<#ins"+b+">"+c.replace(/<(?!#)/g,"<#")+"<#/ins>"+(c?"":"</ins>")}).replace(/<(del.*?data-del=")(.*?)(".*?)></(del>)/g,"<#$1$2$3><#/$4$2</$4").replace(/<del(.*?)>([\s\S]*?)</del>/g,function(a,b,c,d){n=(n=c.match(/<s>\s*(.*?)\s*</s>/i))&&n[0]?' data-s="'+(n[1]||"1")+'"':"";u=(u=c.match(/data-ins="(.*?)"/))&&u[1]?u[1]:""==n?.25:.75;c=c.replace(/(<s>.*?</s>|<[/]?.*?>)/g,"");return"<del"+b+n+' data-del="'+c.replace(/\n/,"\n")+'" data-ins="'+u+'">'+("*"!=c?c:"")+"</del>"}).replace(/<s>\s*(\d+)\s*</s>/g,'<s data-speed="$1"></s>').replace(/<(\w+)(.*?)>/g,"<$1$2><#/$1>").replace(/</(\w+)>/g,"</> ($1)").replace(/<[#]+/g,"<").replace(/(/del>)*</g,"$1<").match(/<ins.*?>[\s\S]*?</ins>|<[^<]+/>|</> (\w+)|<[\s\S]+?></\w+>|&[#x]?[a-z0-9]+;|\r|\n|\t|\S|\s/ig);!e(d)&&(d=g.shift());g.push("\u200b");"de"==a.locale&&(z='12qwertzuiop\u00fc+asdfghjkl\u00f6\u00e4#<yxcvbnm,.-!"\u00a7$%&/(()=?1234567890\u00df*p+');var K=F()+1;!t&&e(a.init,"f")&&a.init(r);r.data("ti",I=setInterval(function(){m=r;if(++B>=m.data("speed")/10)if(B=0,m.data("paused"))y=1;else if(!p){p=!p;if(e(d)){if(0<--d){p=!p;A(.25>=b.data().ins?0:1==y?y=-1:1);return}d=b.data().ins?"</>":g.shift()}else if(a.speed_vary&&~~(4*Math.random())){p=!p;return}A(0);if(b.data().del&&(!0===m.data().beep&&f.beep(),b.data().s&&!d[0]&&b.text(""),w=String(b.data().del),!e(d,"a")&&"/"==d[1]&&(d=w.replace(/\n/g,"\n").split([])),e(d,"a"))){if(y=d.pop()){b.data().s?b.html(d.join([])+"<mark "+("."==(n=String(b.data().s))[0]?'class="'+n.substr(1)+'"':'style="background:'+("1"==n?"yellow":n.split(",")[0])+((n=n.split(",")[1])?";color:"+n:"")+';"')+">"+b.data().del.substr(d.length)+"</mark>"):b.text(d.join([]));p=!p;return}"*"==w&&(G.wrapInner(c("<"+a.tag+"/>",{"class":"typing-0",style:"display:none;"})),b=b.parent(),t&&(g=c.merge(["<"+a.tag+' class="typing-add"></'+a.tag+">"],g,["</"+a.tag+">"]),b=b.parent()));b=b.parent();"\u200b"==w&&b.find(":last").remove();d=""}for(;"/"==d[1];)b=b.parent(),d=g.shift()||"";for(;;)if(!0===m.data().beep&&f.beep(),b.append(d),H&&a.typing(m,d,F(),K),!/<ins.*?>[\s\S]+</.test(d)&&/></.test(d)&&(b=b.find(":last")),(_ss=b.data("speed"))&&m.s(_ss),g[0]&&/<\w+/.test(g[0]))d=g.shift();else break;(d=g.shift())?((a.mistype&&!a.kbd||a.kbd&&/kbd/i.test(b.prop("tagName")))&&d&&!d[1]&&"\u200b"!=b.data().del&&" "!=d&&!~~(Math.random()*a.mistype)&&-1<(__=c.inArray(d.toLowerCase(),z,2))&&(__+=~~(2*Math.random())+1,~~(2*Math.random())&&(__-=3),g=c.merge([90>d.charCodeAt(0)?z[__].toUpperCase():z[__],"</del>",d],g),d='<del data-ins=".25" data-del="\u200b"></del>'),d&&"/"==d[1]&&b.data().ins&&(d=~~(1E3*Number(b.data().ins)/m.data().speed)),p=!p):(clearInterval(I),m.removeData(["is_typing","paused","ti"]),e(a.repeat)&&--a.repeat,-1<a.repeat?(a.init=!1,m.t(e(l,"o")?a:l,a)):(A(1),e(a.fin,"f")&&a.fin(m),e(__q=m.data().q,"a")&&__q.length&&m.a(__q.shift())))}},10))})};c.fn.a=function(k){return this.each(function(){c(this).data().t&&c(this).t("add",k)})};c.fn.p=function(k){return this.each(function(){c(this).data().is_typing&&c(this).t("pause",k?!1===k||!0===k?k:void 0:void 0)})};c.fn.b=function(k){return this.each(function(){c(this).data().t&&c(this).t("beep")})};c.fn.s=function(k){return this.each(function(){c(this).data().t&&c(this).t("speed",k)})};c.fn.q=function(k){return this.each(function(){c(this).data().t&&c.type(k)[0].match(/s|n/)&&((q=c(this).data()).q||(q.q=[]),q.q.push(k.toString()),c(this).data().is_typing||c(this).a(q.q.shift()))})};c.fn.t_off=function(k){return this.each(function(){c(this).data().t&&((ti=C.data("ti"))&&clearInterval(ti),(bi=C.data("bi"))&&clearInterval(bi),C.removeData(),c(".t-container",C).replaceWith(function(){return this.childNodes}),c(".t-caret",C).remove());!0===k&&C.text("")})}})(jQuery);
|
|
112
|
-
|
|
113
|
-
```
|
|
143
|
+
■ t.js [リンク](https://github.com/mntn-dev/t.js/blob/master/t.js)
|
|
114
144
|
|
|
115
145
|
|
|
116
146
|
|
3
タイトルの変更
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
js
|
|
1
|
+
タイプライター風「t.js」のbeep音を変更したい
|
test
CHANGED
|
File without changes
|
2
リンクの追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
|
|
17
17
|
やりたい事はこちらになります。
|
|
18
18
|
|
|
19
|
-
■公式 https://mntn-dev.github.io/t.js/
|
|
19
|
+
■公式 [リンク](https://mntn-dev.github.io/t.js/)
|
|
20
20
|
|
|
21
|
-
■Github https://github.com/mntn-dev/t.js
|
|
21
|
+
■Github [リンク](https://github.com/mntn-dev/t.js)
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
1
タイトルの修正
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
jsで自動的
|
|
1
|
+
jsで自動的に流れる音を変更したい
|
test
CHANGED
|
@@ -123,3 +123,11 @@
|
|
|
123
123
|
t.jsのbeep音を変更出来れば一番嬉しいです。
|
|
124
124
|
|
|
125
125
|
ですので、試した内容に関しては「理解が至っていない為、触れず」です。
|
|
126
|
+
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
(window.AudioContext=window.AudioContext||window.webkitAudioContext)?new AudioContext:!1)
|
|
130
|
+
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
この辺りなのかとは思っているのですが…。
|