javascript js 实现有道词典单词循环播放代码

最新推荐文章于 2024-04-25 15:13:31 发布

NEKGod

最新推荐文章于 2024-04-25 15:13:31 发布

阅读量956

点赞数

分类专栏： jquery css3 杂项文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/u014753756/article/details/122136647

版权

jquery 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

杂项

3 篇文章 0 订阅

订阅专栏

css3

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>for_word</title>
</head>
<style>
    html,body{
        padding: 0;
        margin: auto;
    }
    .main{
        padding: 20px;
        text-align: center;
    }
    .audio-box{
        margin-top: 20px;
    }
</style>
<body>
<div class="main">
    <h5>循环播放单词 - 有道英式发言</h5>
    <div>
        单词: <input type="text" name="word" value="" placeholder="请输入单词">
    </div>
    <div>
        播放间隔 秒数:<input type="text" name="time_s" value="2" placeholder="秒数">
    </div>

    <button id="toggle" play="0">播放</button>
    <div class="audio-box">
        <audio controls id="audio">
            <source id="source" src="https://dict.youdao.com/dictvoice?type=1&audio=word">
        </audio>
    </div>

</div>

<script>
let source_element = document.getElementById('source');
let toggle_element = document.getElementById('toggle');
let audio = document.getElementById('audio');
let word_element = document.querySelector("[name='word']");
let time_element = document.querySelector("[name='time_s']");
let url = 'https://dict.youdao.com/dictvoice?type=1&audio=#{audio}';
let setTimeoutIndex = null;
toggle_element.onclick = function () {
    let word = word_element.value;
    if (!word) {
        alert('单词不可为空！！！');
        return ;
    }
    let time = time_element.value;

    let play = !Number(this.getAttribute('play'));
    this.setAttribute('play', Number(play));
    this.innerText = play ? '播发中':'点击播放';
    if (play) {
        source_element.setAttribute('src', url.replace('#{audio}', word));
        audio.load();
        audio.play();
        setTimeoutIndex = setInterval(function () {
            audio.play();
        }, time * 1000);
    }else{
        clearInterval(setTimeoutIndex);
        audio.pause();
    }
}
</script>
</body>
</html>

NEKGod

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript js 实现有道词典单词循环播放代码

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-
复制链接

扫一扫