概要
ACDLとは、アプリは、クラウド、大切なデータは、ローカルです。
アプリ作ったので、plunkerに上げてみた。
機能
Live2dキャラクターが文章を読み上げます。
写真
サンプルコード
<!doctype html>
<html>
<head>
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@6.5.2/dist/browser/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js"></script>
</head>
<body>
<textarea id='src' rows='2' cols='50'>
お掃除します。
</textarea>
<input id='btn' type='submit' value='run' onclick='run()'><br>
<canvas id=canvas></canvas>
<script type='text/javascript'>
const cubism4Model =
"https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json";
(async function main() {
const app = new PIXI.Application({
view: document.getElementById("canvas"),
autoStart: true,
resizeTo: window
});
const model2 = await PIXI.live2d.Live2DModel.from(cubism4Model);
app.stage.addChild(model2);
model2.scale.set(0.3);
})();
function run() {
var src = document.getElementById("src");
var msg = new SpeechSynthesisUtterance();
msg.text = src.value;
msg.lang = "ja-JP";
msg.rate = 1.0;
msg.pitch = 0.8;
window.speechSynthesis.speak(msg);
}
</script>
</body>
</html>
成果物
以上