点名册（随机语音点名）

最新推荐文章于 2022-10-29 16:55:09 发布
迷途明
最新推荐文章于 2022-10-29 16:55:09 发布
阅读量1.4k
点赞数 1
CC 4.0 BY-SA版权
本文链接：https://blog.youkuaiyun.com/weixin_41905935/article/details/80964034
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  #top,
  #head,
  #nav,
  #content {
    text-align: center;
  }

  #top {
    text-align: center;
    background: yellowgreen;
    font-size: 20px;
  }

  #top p {
    color: purple;
    font-weight: bold;
  }

  #head {
    margin-top: 10px;
  }

  #head p {
    color: purple;
    font-weight: bold;
  }

  #nav {
    margin-top: 10px;
  }

  button {
    background: yellowgreen;
    color: #fff;
    box-shadow: 0px;
  }

  #content {
    margin-top: 10px;
  }

  #content span {
    display: inline-block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    background: #000;
    color: #fff;
    text-align: center;
  }
</style>

<body>
  <div id="top">
    <p>点名系统</p>
  </div>

  <div id="head">
    <p>被选中的小伙伴：
      <span></span>
    </p>
  </div>

  <div id="nav">
    <button id="start">开始</button>
    <button id="move">播放选中的小伙伴</button>
    <button id="reset">刷新</button>

    <span>语速：</span>
    <select name="" value="" id="audi">
      <option value="1" class="audi">1</option>
      <option value="2" class="audi">2</option>
      <option value="3" class="audi">3</option>
      <option value="4" class="audi">4</option>
      <option value="5" class="audi">5</option>
      <option value="6" class="audi">6</option>
      <option value="7" class="audi">7</option>
      <option value="8" class="audi">8</option>
      <option value="9" class="audi">9</option>
    </select>

    <span>声音类型：</span>
    <select name="" id="select" selected>
      <option value="0" selected="selected">女生</option>
      <option value="2">男生</option>

    </select>
  </div>

  <div id="content">
    <span class="span">张三</span>
    <span class="span">李四</span>
    <span class="span">王五</span>
    <span class="span">张六</span>
    <span class="span">黄七</span>
    <span class="span">周八</span>
    <span class="span">陈玖</span>
    <span class="span">久人</span>
    <span class="span">博人</span>
    <span class="span">佐助</span>
    <span class="span">佞人</span>
    <span class="span">傻人</span>
    <span class="span">呵呵</span>
    <span class="span">哈哈</span>
    <span class="span">嘻嘻</span>
  </div>
  <!-- 设置音频元素 -->
  <audio id="audio" autoplay src="https://ai.baidu.com/aidemo?type=tns2&idx=1&tex=%25E5%25A5%25A5%25E6%259C%25AF%25E5%25A4%25A7%25E5%25B8%2588&cuid=baidu_speech_demo&cod=2&lan=zh&ctp=1&pdt=1&spd=5&per=4&vol=5&pit=5">
    https://ai.baidu.com/aidemo?type=tns2&idx=1&tex=a%2520b%2520c%2520d&cuid=baidu_speech_demo&cod=2&lan=zh&ctp=1&pdt=1&spd=5&per=2&vol=5&pit=5
  </audio>
</body>
<script src="./jquery-1.12.2.js"></script>
<script>
  //  首先实现的随机产生一个数，取得对应的名字，并且改变对应的样式

  // 1.0获取开始按钮元素
  var start = document.getElementById("start");
  //  1.1获取span代码
  var span = document.getElementsByClassName("span");


  // 1.2获取audio元素
  var audio = document.getElementById("audio");
  // 1.3创建一个空数组，用来存放获取到数据
  var newarr = [];

  // 1.4获取刷新按钮
  var reset = document.getElementById("reset");

  // 1.5获取选中者的按钮
  var move = document.getElementById("move");

  // 1.6获取select元素
  var select = document.getElementById("select");

  // 1.6获取语速控制元素 
  var audi = document.getElementById("audi");

  var text;
  // 注册点击事件
  start.onclick = function () {

    // 随机产生一个数(1-15);
    var b = Math.ceil(Math.random() * 15);
    // console.log(b);

    // 遍历数组span数组
    for (let i = 0; i < span.length; i++) {
      //  console.log($(span[i]).index());
      // 如果随机数产生的跟遍历数组里面的索引+1一致(索引是从0开始的，如果不想索引加1，那么可以在随机数那里修改为0-14)，就取出该索引对对应的内容
      if (b == $(span[i]).index() + 1) {

        // 获取到对应数组里面的内容
        text = span[i].innerHTML;

        // 将获取到的内容放进新建的数组里面
        if (newarr.indexOf(text) == -1) {
          newarr.push(text);
        }

        // 改变对应的样式
        $(span[i]).css({
          background: "#f00"
        });

        // 获取audio元素的URL,并且使用从数组获取的内容（text）代替audio元素URL里面的一部分
        audio.src = "https://ai.baidu.com/aidemo?type=tns2&idx=1&tex=" + text +
          "&cuid=baidu_speech_demo&cod=2&lan=zh&ctp=1&pdt=1&spd=" + audi1 + "&per=" + gender + "&vol=5&pit=5"
      }
    }
  }
  var y;
  // 点击包选中者的名字
  move.onclick = function () {

    // 讲数组转化成字符串放进audio的URL里面去
    y = newarr.join("");
    audio.src = "https://ai.baidu.com/aidemo?type=tns2&idx=1&tex=" + y +
      "&cuid=baidu_speech_demo&cod=2&lan=zh&ctp=1&pdt=1&spd=" + audi1 + "&per=" + gender + "&vol=5&pit=5"
  }

  // 点击刷新
  reset.onclick = function () {
    // 两者二选一
    // location.href = "点名系统.html";
    location.reload();
  }

  // 声音的选择
  var gender
  select.onclick = function () {
    // 获取到下拉的默认值value
    gender = $(select).val();
  }

  // 语速控制
  var audi1;
  audi.onclick = function () {
    // 获取到下拉的默认值value
    audi1 = $(audi).val();
  }
</script>

</html>