wavesurfer.js 中的停止循环属性
[英]Stop Loop Property in wavesurfer.js
问题描述
I'm using wavesurfer.js in my new project.
我在我的新项目中使用wavesurfer.js 。 (Source Link) It has some methods to use for backward/forward in the media player. （源链接）它有一些方法可用于媒体播放器中的后退/前进。 Methods: skip(), skipBackward(), skipForward()方法： 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.问题是当您在最后时刻使用skip() / skipForward()时，在媒体完成之前，它会从头开始。 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/文档页面： https://wavesurfer-js.org/docs/
1 个解决方案
解决方案1
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) （因为CORS 政策在 localhost 上尝试：没有 Access-Control-Allow-Origin错误）
// 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正如我所说，问题出在媒体即将结束时，例如： Wavesurfer On Playing
And you click on Forward Button , It jumps to first of the media) Example: Wavesurfer After Forward然后单击Forward Button ，它会跳转到第一个媒体）示例： Wavesurfer After Forward
So in this situation, I wanna pause the media & keep the playing cursor at the end.所以在这种情况下，我想暂停媒体并在最后继续播放 cursor。 (Or just stop it) I don't need the loop. （或者只是停止它）我不需要循环。 What can I do?!我能做些什么？！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.