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

作者：码创造者 | 2024-08-10 01:15:14

踩

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-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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/码创造者/article/detail/956086

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

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