<!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; } });
