eric/gitlab-instance-0a899031_douyinlive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tts播放

Browse Source
This commit is contained in:
WLT\Eric.hu
2025-04-14 16:09:04 +08:00
parent 4471055273
commit d03b47c706
2 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/index/index.jsx
View File

@@ -44,6 +44,8 @@ const Index = () => {
socket.onmessage = (event) => { socket.onmessage = (event) => {
console.log("接收到消息:", event.data); console.log("接收到消息:", event.data);
setMessage(event.data); // 更新消息状态 setMessage(event.data); // 更新消息状态
// TTS播放
// speak(event.data)
setMessageArr((messageArr) => [event.data,...messageArr]); // 更新消息数组 setMessageArr((messageArr) => [event.data,...messageArr]); // 更新消息数组
}; };
@@ -108,7 +110,7 @@ const Index = () => {
<View className="index"> <View className="index">
<View className="messageArr"> <View className="messageArr">
{messageArr.map((item, index) => ( {messageArr.map((item, index) => (
<View key={index} className="message_item"> <View key={index} className={index===0?"message_item_first":"message_item"}>
{item} {item}
</View> </View>
))} ))}

38
src/pages/index/index.scss
View File

@@ -11,16 +11,19 @@
// background-position: center; // 居中 // background-position: center; // 居中
// background-repeat: no-repeat; // 不重复 // background-repeat: no-repeat; // 不重复
.messageArr{ .messageArr {
padding: 40px; padding: 40px;
font-size: 30px; font-size: 30px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.message_item{
.message_item_first {
color: red;
} }
.message_item {}
} }
.index_backImg { .index_backImg {
width: 100%; width: 100%;
@@ -43,6 +46,7 @@
// align-items: center; // align-items: center;
// justify-content: center; // justify-content: center;
background-color: aqua; background-color: aqua;
.video_js { .video_js {
width: 400px; width: 400px;
height: 200px; height: 200px;
@@ -69,23 +73,26 @@
// align-items: center; // align-items: center;
// justify-content: center; // justify-content: center;
background-image: url('../../images/iphone.jpg'); background-image: url('../../images/iphone.jpg');
background-size: cover; // 拉伸铺满容器 background-size: cover; // 拉伸铺满容器
background-position: center; // 居中 background-position: center; // 居中
background-repeat: no-repeat; // 不重复 background-repeat: no-repeat; // 不重复
color: white; color: white;
.messageArr{ .messageArr {
// padding: 40px; // padding: 40px;
font-size: 40px; font-size: 40px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.message_item{
.message_item_first {
color: red;
} }
.message_item {}
} }
.index_backImg { .index_backImg {
width: 100%; width: 100%;
@@ -106,6 +113,7 @@
top: 0px; top: 0px;
width: 400px; width: 400px;
height: 200px; height: 200px;
.video_js { .video_js {
width: 400px; width: 400px;
height: 200px; height: 200px;