When Jquery Play Pause Audio Button Finish Event
Question
How can I make the audio go back to play after it's finished?
start button is: PLAY - is ok click play start audio and button text is PAUSE - is ok but after finish the audio, button must be back to PLAY TEXT
$(".ttt").click(function() { if ($(".podcast-content audio").get(0).paused) { $(".podcast-content audio")[0].play(); $(".ttt").html('Pause'); } else { $(".podcast-content audio")[0].pause(); $(".ttt").html('Play'); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#/" class="ttt">PLAY</a> <div class="podcast-content"> <audio> <source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg"> </audio> </div>
1 answers
solution1
0 2022-12-11 02:01:19
You can achieve the functionality aiming for as follows:
$(document).ready(function () { $(".ttt").click(function () { if ($(".podcast-content audio").get(0).paused) { $(".podcast-content audio")[0].play(); $(".ttt").html('Pause'); } }); $(".podcast-content audio").on('ended', function() { $(".ttt").html('Play'); }); })
<html lang=""> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-w idth, initial-scale=1.0"> <title>p5.js example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#/" class="ttt">PLAY</a> <div class="podcast-content"> <audio> <source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg"> </audio> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Audio play/pause on different button click Jquery
<audio> play/pause button change
How can I use jquery to play audio with a toggling play and pause button?
audio play/pause button problem in multiline
Play/Pause Button HTML5 Audio
Play and Pause audio with the same button please
Multiple Play/Pause button with audio tag
How to toggle audio play() pause() with a button click?
Html audio play/pause using a single button
How to toggle audio play/pause with one button
Related Tags