css3 语音播放的动画

CSS3语音播放动画

/* 创建一个 div */div {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
}
/* 在 div 中创建一个 span，用于显示动画 */div span {
    width: 10px;
    height: 10px;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -5px;
    margin-top: -5px;
    animation-name: pulse;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}
/* 定义动画 */@keyframes pulse {
from {
    transform: scale(1);
    opacity: 1;
}
to {
    transform: scale(2);
    opacity: 0.5;
}
}
    /* 使用 JavaScript API(Web Speech API) 播放语音 */let speechSynthesis = window.speechSynthesis;
    let synthesis = new SpeechSynthesisUtterance("Hello World.");
    speechSynthesis.speak(synthesis);
    

实现原理

首先创建一个 div，然后在 div 中创建一个 span，用于显示动画。设置 span 的位置为跟随 div 居中，使用 animation-name、animation-duration、animation-iteration-count 属性定义动画样式。

然后使用 JavaScript API(Web Speech API) 播放语音。在创建 SpeechSynthesisUtterance 实例时传入要播放的语音文本内容，使用 speechSynthesis.speak() 方法播放语音。

这样一来，当语音播放时，span 就会显示动画，达到一种很酷的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！