js监听audio播放完毕-重置音频

简介: js监听audio播放完毕-重置音频
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>audio监听播放完毕</title>
</head>
<body>
<audio src="http://images.aicangjie.com/youer/chengyu/mp3/u8qc10yy_1611872360_shiyi.mp3" id="audio" controls="true" autoplay="true"></audio>
<script>
    var audio = document.getElementById("audio"); 
    audio.loop = false;
    audio.addEventListener('ended', function () {  
        alert('播放结束');
    }, false);
</script> 
</body>
</html>
//点击重置音频
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Document</title>
</head>
<body>
  <audio autoplay="false" controls="controls" src="http://images.aicangjie.com/youer/chengyu/mp3/u8qc10yy_1611872360_shiyi.mp3"></audio>
  <button>button</button>
  <script type="text/javascript">
    var btn = document.querySelector("button")
    btn.onclick = function() {
      playAudio();
    }
    function playAudio() {
      var audio = document.querySelector("audio"),
        audioSrc = audio.src,
        playStatus = false;
      if(playStatus) {
        audio.pause();
        audio.src = '';
      } else {
        audio.src = audioSrc;
        console.log(audioSrc);
        audio.play();
      }
    }
  </script>
</body>
</html>
$(".listDiv").on('click', '.shiyiyin', function() { //点击释译
  var myAudio1 = document.getElementById('shiyiyin');
  var myAudio2 = document.getElementById('zaojuyin');
  if (myAudio1.paused) {
    $(".zaojuyin").attr("src", "./img/yy.png");
    $(".shiyiyin").attr("src", "./img/gif.gif");
    myAudio2.pause();
    myAudio1.play();
    myAudio1.loop = false;
    myAudio1.addEventListener('ended', function() {
      $(".zaojuyin").attr("src", "./img/yy.png");
    }, false);
    var lijuMp3 = window.localStorage.getItem("lijuMp3");
    myAudio2.src = lijuMp3;
  } else {
    $(".shiyiyin").attr("src", "./img/yy.png");
    myAudio1.pause(); //暂停后重置音频
    var shiyiMp3 = window.localStorage.getItem("shiyiMp3");
    myAudio1.src = shiyiMp3;
  }
});
相关文章
|
4月前
|
JavaScript 前端开发 UED
JS实现绑定事件监听的几种方法详解
JS实现绑定事件监听的几种方法详解
|
2月前
|
JavaScript
JS监听按键,禁止F12,禁止右键,禁止保存网页
JS监听按键,禁止F12,禁止右键,禁止保存网页
|
2月前
|
JavaScript
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
|
2月前
|
JavaScript
JS监听按键,禁止F12,禁止右键,禁止保存网页
JS监听按键,禁止F12,禁止右键,禁止保存网页
20 0
|
2月前
|
前端开发 JavaScript
前端知识(十三)——JavaScript监听按键,禁止F12,禁止右键,禁止保存网页【Ctrl+s】等操作
前端知识(十三)——JavaScript监听按键,禁止F12,禁止右键,禁止保存网页【Ctrl+s】等操作
34 0
|
4月前
|
前端开发 JavaScript
|
5月前
|
JavaScript
js监听视频播放结束demo效果示例(整理)
js监听视频播放结束demo效果示例(整理)
|
5月前
|
Web App开发 JavaScript
JS获取音频的总时长,解决Audio元素duration为NaN || Infinity 问题
JS获取音频的总时长,解决Audio元素duration为NaN || Infinity 问题
|
6月前
|
JavaScript 前端开发 API
浅谈JS监听非自定义属性
浅谈JS监听非自定义属性
41 0
|
6月前
|
JavaScript Windows
nodemon 监听失败 卡在[nodemon] restarting due to changes... 重新启动js脚本失败
在网上搜索了大半天方法,汇总一下....可能对你们有效 1. 重启电脑(对我无效) 2. 重装nodemon,删掉之后,全局安装和项目本地安装(对我无效) 3. 安装supervisor(个人还是喜欢用nodemon,比较简便) 4. 添加系统环境变量后重启电脑(解决了我的问题)

相关产品

  • 云迁移中心