html+css+js之20个练手小项目（二）——speech-text-reader

最新推荐文章于 2024-04-13 15:54:34 发布

qq_40312477

最新推荐文章于 2024-04-13 15:54:34 发布

阅读量1.2k

点赞数 1

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_40312477/article/details/121442799

版权

html+css+js之20个练手小项目（二）——speech-text-reader

前言
一、Html
二、CSS
二、JS

前言

前端新手练习，记录不迷失。
主要练习html和CSS布局以及JS。
来源github，参考链接：使用html和纯js实现小项目
speech-text-reader主要涉及语音播报，点击图片，播放文字语音。
在这里插入图片描述

一、Html

页面结构比较简单，需要注意的是，链接的图片和文字以及语音下拉框都是通过JS插入的。主要包括标题、表单按钮、表单以及卡片主体部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>speech-txt-reader</title>
    <link rel="stylesheet" href="style.css"/>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="action.js"></script>
</head>
<body>
    <!-- 元素属性值用双引号 -->
    <div class="cotainer">
        <h1>Speech Text Reader</h1>
        <button class="btn toggle">Toggle Text Box</button>
        <div class="text-box">
            <span class="close"></span>
            <h3>Choose Voice</h3>
            <select id="voices"></select>
            <textarea id="text" placeholder="Enter text to read..."></textarea>
            <button class="btn" id="read">Read Text</button>
        </div>
        <main></main>
    </div>
</body>
</html>

二、CSS

1.学习gird网格布局，可以参考博主 grid布局，归纳的比较详细。
2.学习@media ，看看W3school，link

@import url('https://fonts.googleapis.com/css?family=Lato');
/* @import 规则允许您将样式表导入另一张样式表中。

@import 规则必须位于文档顶部（但是在任何 @charset 声明之后）。

@import 规则还支持媒体查询，因此可以允许依赖媒体的导入。 */
body {
    background-color: #ffefea;
    font-family: 'Lato', sans-serif;
    box-sizing: border-box;
}
h1 {
    text-align: center;/* text-align 属性规定元素中的文本的水平对齐方式。 */
}
.cotainer {
    margin: auto;
    padding: 20px;
 
}
.btn {
    display: block;
    cursor: pointer;
    background-color: darksalmon;
    border: 0;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    padding: 8px;
    margin:auto;
    margin-bottom: 20px;
}
.btn:active {
    transform: scale(0.98);
  }
.text-box {
    width: 70%;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -800px);/* 设置居中且隐藏 */
    background-color: #333;
    padding: 20px;
    border-radius: 5px;
    color:#fff;
}
.text-box.show {
    transform: translate(-50%, 0);
}
/* 设置关闭按钮 */
.text-box .close {
    float:right;
    cursor: pointer;
    position: relative;
    display: block;
    /*relative属性相对比较简单，它是相对它所属父元素来进行偏移的，可以通过“top”、“bottom”、“left”、“right”4个偏移属性进行定位。 
     absolute绝对定位，依据父元素中最近设置为relative定位类型的元素进行偏移。fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。*/
}

.text-box .close::before {
    content: '';
    width: 2px;
    height: 15px;
    transform: rotate(45deg);
    background-color: #fff;
    display: block;
    position: absolute;
}
.text-box .close::after {
    display: block;
    content: '';
    width: 2px;
    height: 15px;
    transform: rotate(-45deg);
    background-color: rgb(255, 255, 255);
    position: absolute;
}
.text-box select{
    background-color: darksalmon;
    border:0;
    width:100%;
    height:30px;
    font-size: 12px;
    color:#fff;
}
.text-box textarea{
    width:100%;
    height:150px;
    font-size:16px;
    border:1px solid #dadada;
    margin:15px 0;
    padding:8px;

}
.text-box .btn{
    width: 100%;
    margin:0;
}
main {
    display: grid;/* 学习网格布局 */
    grid-gap: 10px;
    grid-template-columns: repeat(4,1fr); /* 设置网格的列数。写几个值表示有几列   
    值可以是px这种固定大小的，也可以是百分比，也可以使用fr这种单位；fr表示总空间减去固定空间和百分比的大小，然后再分配 */
}
.box {
    box-shadow: 0 2px 10px rgb(0, 0, 0, 20%);
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.box.active{
    box-shadow:0 0 10px 5px darksalmon;
}
.box img {
    height: 200px;
    object-fit: cover;
    width: 100%;
}
.box .info {
    background-color: darksalmon;
    color: #fff;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
    padding: 10px;
    text-align: center;
    height: 100%;
}

/* @media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。

媒体查询可用于检查许多事情，诸如：

视口的宽度和高度
设备的宽度和高度
方向（手机或平板电脑处于横屏还是竖屏模式？）
分辨率 */
@media (max-width: 1100px) {
    main {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 760px) {
    main {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    main {
        grid-template-columns: 1fr;
    }
}

二、JS

①了解html5中新增的API播放语音，通过 new SpeechSynthesisUtterance()创建，利用他可以播放想要的内容，还能修改声音的音量、语言等。
②需要注意的是在获取浏览器的支持的语言时，需要通过监听事件speechSynthesis.addEventListener(‘voiceschanged’, getVoices);来更新表单，否则会出现浏览器控制台能获取，但是页面无法刷新出来的问题。
③整个JS部分包括将图片和文字append到html；将多语言append到html表单；以及一些按件操作，包括打开和关闭表单，播放输入的文字等。

$(document).ready(function () {
    const data = [
        {
            image: 'uncompressed/drink.jpg',
            text: "I'm Thirsty",
        },
        {
            image: 'uncompressed/food.jpg',
            text: "I'm Hungry",
        },
        {
            image: 'uncompressed/tired.jpg',
            text: "I'm Tired",
        },
        {
            image: 'uncompressed/hurt.jpg',
            text: "I'm Hurt",
        },
        {
            image: 'uncompressed/happy.jpg',
            text: "I'm Happy",
        },
        {
            image: 'uncompressed/angry.jpg',
            text: "I'm Angry",
        },
        {
            image: 'uncompressed/sad.jpg',
            text: "I'm Sad",
        },
        {
            image: 'uncompressed/scared.jpg',
            text: "I'm Scared",
        },
        {
            image: 'uncompressed/outside.jpg',
            text: 'I Want To Go Outside',
        },
        {
            image: 'uncompressed/home.jpg',
            text: 'I Want To Go Home',
        },
        {
            image: 'uncompressed/school.jpg',
            text: 'I Want To Go To School',
        },
        {
            image: 'uncompressed/grandma.jpg',
            text: 'I Want To Go To Grandmas',
        },
    ];
    // 初始化
    const message = new SpeechSynthesisUtterance(); /* html5中新增播放语音 */
    //写入option
    let voices;
    //添加事件监听很重要，否则无法加载
    speechSynthesis.addEventListener('voiceschanged', getVoices);
    function getVoices() {
        voices = speechSynthesis.getVoices();
        voices.forEach(voice => {
            let $target = $('<option></option>');
            $target.text(`${voice.name} 
        `);
            $('#voices').append($target);
        });
    }
    //改变语音
    $('#voices').change(function (e) {
        let set=$(":selected").val();
        message.voice =  voices.find(voice => voice.name === set);//===判断值和类型是否相同 ，==运算赋值等操作都会导致类型转换
        //find()方法返回第一个满足过滤方法的元素
    });
   
    /*   data.forEach(element => {
        let $box = $('<div class="box"></div>');
        $box.append('<img src="' + element['image'] + '" />');
        $box.append('<p class="info">' + element['text'] + '</p>');
        $('main').append($box);
    }); */
    data.forEach(element => {
        let $box = $('<div class="box"></div>');
        const { image, text } = element;

        $box.append(`<img src="${image}"/>
        <p class="info">${text}</p>`);
        /* 在实际开发中我们一般在ajax请求中用`不变的html${变量}html标签`代替以前传统复杂的单引号双引号与+的拼接，简介明了，非常好用。 */

        $box.click(function () {
            $(this).addClass('active');
            message.text = text;
            speechSynthesis.speak(message);
            setTimeout(function () {
                $box.removeClass('active');
            }, 500);
        });
        $('main').append($box);
    });

    $('.toggle').click(function () {
        $('.text-box').toggleClass('show');
    });
    $('.close').click(function () {
        $('.text-box').removeClass('show');
    });
    $('#read').click(function () {
        message.text = $("#text").val();
        speechSynthesis.speak(message);
    });
    
    
});

qq_40312477

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
html+css+js之20个练手小项目（二）——speech-text-reader

html+css+js之20个练手小项目（二）——speech-text-reader前言一、Html二、CSS二、JS前言前端新手练习，记录不迷失。主要练习html和CSS布局以及JS。来源github，参考链接：使用html和纯js实现小项目speech-text-reader主要涉及语音播报，点击图片，播放文字语音。一、Html页面结构比较简单，需要注意的是，链接的图片和文字以及语音下拉框都是通过JS插入的。主要包括标题、表单按钮、表单以及卡片主体部分。<!DOCTYPE
复制链接

扫一扫