js监听audio播放完毕-重置音频-阿里云开发者社区

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

2023-09-16 343

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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;
  }
});

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景