Stop Loop Property in wavesurfer.js
Question
I'm using wavesurfer.js in my new project. (Source Link) It has some methods to use for backward/forward in the media player. Methods: skip(), skipBackward(), skipForward()
The problem is when you are using skip() / skipForward() in last moments, before the media finish, it starts again from the beginning. I need to stop playing at the end. I don't want that loop property. I have searched the documentation. Nothing there also. It doesn't have a loop option to make it false!
Documentation Page: https://wavesurfer-js.org/docs/
1 answers
solution1
0 2022-08-03 19:18:03
This is my code:
(Try it on localhost because of CORS Policy: No Access-Control-Allow-Origin error)
// WaveSurfer Create Method var WaveSurferElement = WaveSurfer.create({ container: '#wavesurfer', waveColor: '#000068', progressColor: '#9f5000', skipLength: 5, cursorWidth: 2, barWidth: 3, barRadius: 3, barGap: 3, }); // WaveSurfer Load Method WaveSurferElement.load('../files/example.mp3'); // WaveSurfer Ready Event WaveSurferElement.on('ready', function () { // Enable Buttons $('#play-btn,#forward-btn,#backward-btn').prop('disabled', false); }); // WaveSurfer Play Event WaveSurferElement.on('play', function () { $('#play-btn').find('.icon').removeClass('fa-play').addClass('fa-pause'); $('#play-btn').attr('title', 'Pause'); $('#play-btn').attr('id', 'pause-btn'); }); // WaveSurfer Pause Event WaveSurferElement.on('pause', function () { $('#pause-btn').find('.icon').removeClass('fa-pause').addClass('fa-play'); $('#pause-btn').attr('title', 'Play'); $('#pause-btn').attr('id', 'play-btn'); }); // Play Button Action $(document).on('click', '#play-btn', function () { WaveSurferElement.play(); }); // Pause Button Action $(document).on('click', '#pause-btn', function () { WaveSurferElement.pause(); }); // Forward Button Action $(document).on('click', '#forward-btn', function () { WaveSurferElement.skipForward(); }); // Backward Button Action $(document).on('click', '#backward-btn', function () { WaveSurferElement.skipBackward(); });
body { direction: rtl; }.player-section { position: relative; width: 500px; height: 350px; background: linear-gradient(180deg, #000000 0%, #ff8100 50%, #000000 100%); margin: 20px auto; padding: 10px; border-radius: 8px; }.player-section.player { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 100%; background-color: rgb(255 255 255 / 70%); border-radius: 8px; }.player-section.player, .player-section.action { box-shadow: 0 0 3px 0 #000000; }.player-section.player.wavesurfer { margin-top: 90px; }.player-section.action { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; text-align: center; background-color: rgb(0 0 0 / 70%); border-radius: 0 0 8px 8px; }.player-section.action.btn { width: 150px; height: 40px; background-color: white; font-family: Arial; font-size: 18px; border: 0; margin: 10px 5px; border-radius: 8px; text-transform: uppercase; }.player-section.action.btn.play-btn { width: 40px; border-radius: 3px; }.player-section.action.btn.forward-btn.icon { margin-left: 3px; }.player-section.action.btn.backward-btn.icon { margin-right: 3px; }.player-section.action.btn:hover { opacity: 80%; cursor: pointer; }
<.doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WAVESURFER:JS</title> <.-- Styles --> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all:min.css"> <.--/Styles --> </head> <body> <div class="player-section"> <div class="player"> <div class="wavesurfer" id="wavesurfer"></div> </div> <div class="action"> <button class="btn forward-btn" id="forward-btn" title="Forward" disabled> <i class="icon fa-solid fa-forward-fast"></i><span>Forward</span> </button> <button class="btn play-btn" id="play-btn" title="Play" disabled> <i class="icon fa-solid fa-play"></i> </button> <button class="btn backward-btn" id="backward-btn" title="Backward" disabled> <span>Backward</span><i class="icon fa-solid fa-backward-fast"></i> </button> </div> </div> <.-- Scripts --> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3:6.0/jquery.min.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/6.2.0/wavesurfer.min.js"></script> <!--/Scripts --> </body> </html>
As I said, the problem is when media is about to finish, Example: Wavesurfer On Playing
And you click on Forward Button , It jumps to first of the media) Example: Wavesurfer After Forward
So in this situation, I wanna pause the media & keep the playing cursor at the end. (Or just stop it) I don't need the loop. What can I do?!
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.