js实现点击音频实现播放功能

简介: js实现点击音频实现播放功能

html:

 <div class="audioDiv" id="playButton" style="width:13vw;height: 3.5vh;">
            <img src="./img/yuyin.png" alt="" />
          <p id="countdown">4:31<p>
          <p id="bofang">播放录音</p>
       </div>


css:

.audioDiv{
  cursor: pointer;
  background-color: #38ADFF;
  border-radius: 0.3vw;
}
 
#playButton img{
  width: 1vw;
  margin: 0 0.5vw;
}
 
#countdown{
  font-size: 0.7vw;
  width: 4vw;
}
 
#bofang{
  font-size: 0.8vw;
  width: 7vw;
}
 
#playButton:hover{
  opacity: 0.8;
}


js:

//播放录音功能
let audio = new Audio('./img/nihong.mp3');
let audioStatus = true
let times
$('#playButton').on('click', function() {
  if (audioStatus == true) {
    audio.play();
    daojishi()
    audioStatus = false
  } else {
    audio.currentTime = 0;
    audio.pause();
    clearInterval(times);
    $('#countdown').html('4:31');
    audioStatus = true
  }
  setTimeout(function() {
    audio.currentTime = 0;
    audio.pause();
    $('#countdown').html('4:31');
    audioStatus = true
  }, 271000)
})
 
function daojishi() {
  var m = 4;
  var s = 31;
  times = setInterval(function() {
    if (s < 10) {
      //如果秒数少于10在前面加上0
      $('#countdown').html(m + ':0' + s);
    } else {
      $('#countdown').html(m + ':' + s);
    }
    s--;
    if (s < 0) {
      //如果秒数少于0就变成59秒
      s = 59;
      m--;
    }
  }, 1000)
}
相关文章
|
12天前
|
JavaScript 前端开发
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
16 0
|
12天前
|
JavaScript
JS实现一键点击按钮复制文本
【5月更文挑战第6天】JS实现一键点击按钮复制文本
|
12天前
|
JavaScript 前端开发 测试技术
编写JavaScript模块化代码主要涉及将代码分割成不同的文件或模块,每个模块负责处理特定的功能或任务
【5月更文挑战第10天】编写JavaScript模块化代码最佳实践:使用ES6模块或CommonJS(Node.js),组织逻辑相关模块,避免全局变量,封装细节。利用命名空间和目录结构,借助Webpack处理浏览器环境的模块。编写文档和注释,编写单元测试以确保代码质量。通过这些方法提升代码的可读性和可维护性。
21 3
|
12天前
|
JavaScript 前端开发
JavaScript实现识别二维码信息功能
JavaScript实现识别二维码信息功能
14 1
|
12天前
|
JavaScript
js实现全屏功能——易懂版
js实现全屏功能——易懂版
11 0
|
12天前
|
JavaScript 前端开发 API
如何利用JavaScript和Electron构建具有丰富功能的桌面应用
【4月更文挑战第30天】如何利用JavaScript和Electron构建具有丰富功能的桌面应用
9 0
|
12天前
|
JavaScript 前端开发
实现一个JavaScript动态日期功能
实现一个JavaScript动态日期功能
|
12天前
|
JavaScript 前端开发
JavaScript模糊搜索功能
JavaScript模糊搜索功能
|
12天前
|
JavaScript 前端开发
JavaScript三级联动功能
JavaScript三级联动功能
|
12天前
|
JavaScript
JS实现分页功能
JS实现分页功能