Skip to content

Commit b8df402

Browse files
SheepTesterSheepTester
committed
aiyouweiya attempt (and miku)
1 parent bcbc4f2 commit b8df402

File tree

5 files changed

+59
-2
lines changed

5 files changed

+59
-2
lines changed

‎ass/ets/er.wav‎

200 KB
Binary file not shown.

‎ass/ets/hartsorne.png‎

153 KB
Loading

‎ass/ets/hatsunre-NICK.png‎

261 KB
Loading

‎ass/ets/nick-blender.wav‎

60.4 KB
Binary file not shown.

‎vocaloid.html‎

Lines changed: 59 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,45 @@
4848
img {
4949
max-width: 100%;
5050
}
51+
#wow {
52+
transform-origin: bottom;
53+
animation: wow 0.25s ease-in-out alternate infinite paused;
54+
}
55+
@keyframes wow {
56+
0% {
57+
transform: scaleY(1) skewX(5deg);
58+
}
59+
50% {
60+
transform: scaleY(0.5) skewX(0deg);
61+
}
62+
63+
100% {
64+
transform: scaleY(1) skewX(-5deg);
65+
}
66+
}
5167
</style>
5268
</head>
5369

5470
<body>
5571
<div id="div">
72+
<img src="./ass/ets/hatsunre-NICK.png" style="float:right" height="200"/>
5673
<h1>vocal</h1>
5774
<p>click to start</p>
5875
<button onclick="example1()">example 1</button>
5976
<button onclick="example2()">example 2</button>
77+
<button onclick="example3()">example 3</button>
78+
<img src="./ass/ets/hartsorne.png" width="200" id="wow" />
79+
<form action="vocaloid.html" method="get">
80+
<fieldset>
81+
<label>select voice</label>
82+
<ul>
83+
<li><label><input type="radio" value="nick-blender" name="audio"> nick</label></li>
84+
<li><label><input type="radio" value="microwave-schwa" name="audio" checked> sean</label></li>
85+
<li><label><input type="radio" value="er" name="audio"> both</label></li>
86+
</ul>
87+
<button>change</button>
88+
</fieldset>
89+
</form>
6090
<script type="module">
6191
const context = new AudioContext()
6292
let audioCtx = context
@@ -227,11 +257,12 @@ <h1>vocal</h1>
227257
tempSource.connect(offlineCtx.destination);
228258
tempSource.start();
229259

260+
const params = new URL(window.location.href).searchParams
230261
// 3. Render and use it in the real AudioContext
231262
const renderedBuffer =await offlineCtx.startRendering()//.then(renderedBuffer => {
232263
const source = audioCtx.createBufferSource();
233264
// source.buffer = renderedBuffer;
234-
source.buffer = await context.decodeAudioData(await fetch('./ass/ets/microwave-schwa.wav').then(r=>r.arrayBuffer()));
265+
source.buffer = await context.decodeAudioData(await fetch(`./ass/ets/${params.get('audio') ?? 'microwave-schwa'}.wav`).then(r=>r.arrayBuffer()));
235266
source.loop = true;
236267
// source.connect(audioCtx.destination);
237268

@@ -275,7 +306,7 @@ <h1>vocal</h1>
275306
// filter1.frequency.linearRampToValueAtTime(240, context.currentTime + 1)
276307
// filter2.frequency.linearRampToValueAtTime(2400, context.currentTime + 1)
277308
// eeee
278-
new SpeechBuilder()
309+
let t=new SpeechBuilder()
279310
.start().tone(0).vowel('i').for(0.4)
280311
.stop().for(0.1)
281312
.start().vowel('æ').for(0.1)
@@ -289,6 +320,8 @@ <h1>vocal</h1>
289320
.start().tone(-4).vowel('o').for(0.1)
290321
.transition(0.3).vowel('u').done().for(0.1)
291322
.stop()//.for(0.5)
323+
wow.style.animationPlayState = 'running'
324+
setTimeout(( ) => (wow.style.animationPlayState = 'paused'),t.t*1000)
292325
// .start().tone(0).vowel('u').for(0.1).transition(1).vowel('i').done().for(0.1).stop()
293326

294327
// source.detune.setValueAtTime(0, context.currentTime + 0)
@@ -346,6 +379,7 @@ <h1>vocal</h1>
346379

347380
window.example2 = () => {
348381
let t = new SpeechBuilder()
382+
wow.style.animationPlayState = 'running'
349383
for (const speed of [0.5,1,1, 0.5]) {
350384
t.speed = speed
351385
t = t.stop().for(0.5)
@@ -362,6 +396,29 @@ <h1>vocal</h1>
362396
.start().vowel('æ').tone(1).for(0.2).stop().for(0.2)
363397
.start().vowel('i').tone(0).for(0.1).stop().for(0.1)
364398
}
399+
setTimeout(( ) => (wow.style.animationPlayState = 'paused'),t.t*1000)
400+
}
401+
402+
// 哎呦喂呀
403+
window.example3 = () => {
404+
let t = new SpeechBuilder()
405+
t.speed = 0.5
406+
t.start()
407+
.vowel('æ').tone(1).for(0.1)
408+
.transition(0.3).tone(-1).vowel('i').done().for(0.1)
409+
.for(0.2)
410+
.transition(0.1).tone(-1).vowel('o').done().for(0.2)
411+
.transition(0.1).vowel('u').done().for(0.1)
412+
.transition(0.1).vowel('e').done().for(0.1)
413+
.transition(0.3).tone(1).vowel('i').done().for(0.1)
414+
// .for(0.1)
415+
.transition(0.4).tone(-1).vowel('æ').done().for(0.2)
416+
// .transition(0.1).tone(0.5).done().for(0.2)
417+
.stop()
418+
419+
420+
wow.style.animationPlayState = 'running'
421+
setTimeout(( ) => (wow.style.animationPlayState = 'paused'),t.t*1000)
365422
}
366423

367424
</script>

0 commit comments

Comments
 (0)