H5 实现--在线英文发音

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>voice</title>

    <style>

        * {

            margin: 0px;

            padding: 0px;

        }

        body {

            background: #333;

            color: #ddd;

            margin-bottom: 100px;

        }

        .box {

            width: 70%;

            margin: 0 auto;

            margin-top: 50px;

            line-height: 25px;

            display: flex;

            justify-content: space-between;

            flex-wrap: wrap;



        }

        .item {

            display: inline-block;

            width: 370px;



            border-radius: 10px;

            background: #444;

            padding-left: 15px;

            padding-right: 15px;

            margin-top: 15px;

            padding-bottom: 10px;



        }

        .item .word {

            color: #fc0;

            font-size: 24px;

            line-height: 45px;

            display: inline-block;

            padding-right: 10px;

            transition: color 0.35s;

            cursor: pointer;

        }

        .item .word:hover {

            color: #f90;

        }

        .item .button {

            display: inline-block;

        }

    </style>

</head>



<body>

    <div class="box">

        <div class="item">

            <p class="word">test </p><img class="button" src="voice.png" alt="voice">

        </div>

        <div class="item">

            <p class="word">this is my home</p><img class="button" src="voice.png" alt="voice">

        </div>

        <div class="item">

            <p class="word">zhugj </p><img class="button" src="voice.png" alt="voice">

        </div>

        <div class="item">

            <p class="word">china </p><img class="button" src="voice.png" alt="voice">

        </div>

        <audio id="audio"></audio>

</body>



</html>

<script>

    var audio = document.getElementById("audio");

    var audioUrl = 'https://dict.youdao.com/speech?audio='; //有道在线发音的api地址

    var pronounce = document.getElementsByClassName("button");

    for (var index in pronounce) {

        pronounce[index].onclick = function () {

            audio.src = audioUrl + this.previousSibling.textContent; //获取p标签对象，因为p标签内才有英文单词;

            audio.play();

        }

    }

</script>
H5 实现--在线英文发音

猜你喜欢
