单击时使用 HTML 元素更改 Javascript 变量值 (wavesurfer.js)

Question

我正在使用 Wavesurfer.js 可视化来自 .当我点击 HTML 元素时，有没有办法使用 jQuery 或 Javascript 动态更改加载的音频文件？

我能够可视化单个文件，但不知道如何动态更改加载的文件。

这是我页脚中的 Wavesurfer.js 实例

<script>

var wavesurfer = WaveSurfer.create({
  backend: 'MediaElement',
    container: '#waveform',
    barWidth: 1,
    barGap: 3,
    cursorColor: '#e15a13',
    cursorWidth: 3,
    mediaControls: true,
    hideScrollbar: true,
    waveColor: "#000000",
    fillParent: true,
    responsive: true,
});

wavesurfer.setHeight(40);
wavesurfer.load('http://dev.chrislamdesign.com/shortwave/wp-content/uploads/2019/10/Pharrell-Williams-Happy-Official-Music-Video-1.mp3');

wavesurfer.on('ready', updateTimer)
wavesurfer.on('audioprocess', updateTimer)

// Need to watch for seek in addition to audioprocess as audioprocess doesn't fire
// if the audio is paused.
wavesurfer.on('seek', updateTimer)

function updateTimer() {
  var formattedTime = secondsToTimestamp(wavesurfer.getCurrentTime());
  $('.waveform-time-indicator .time').text(formattedTime);
}

function secondsToTimestamp(seconds) {
  seconds = Math.floor(seconds);
  var h = Math.floor(seconds / 3600);
  var m = Math.floor((seconds - (h * 3600)) / 60);
  var s = seconds - (h * 3600) - (m * 60);

  h = h < 10 ? '0' + h : h;
  m = m < 10 ? '0' + m : m;
  s = s < 10 ? '0' + s : s;
  return h + ':' + m + ':' + s;
}
</script>

我想在单击时用 HTML 字符串替换加载的文件 (wavesurfer.load)。我正在使用 Wordpress 来循环播放歌曲结果，每个结果都有一个 URL 打印在带有 class "move_to_wavesurfer" 的段落标记中。所以，当我点击歌曲时，我想用段落标签值替换 wavesurfer.load 值。

这是要注入的 HTML

<div class="col-md-3">
<a class="song-link" data-target="#song-8">
    <img width="606" height="610" src="http://dev.chrislamdesign.com/shortwave/wp-content/uploads/2019/07/cover.png" class="attachment-full size-full wp-post-image" alt="" srcset="http://dev.chrislamdesign.com/shortwave/wp-content/uploads/2019/07/cover.png 606w, http://dev.chrislamdesign.com/shortwave/wp-content/uploads/2019/07/cover-150x150.png 150w, http://dev.chrislamdesign.com/shortwave/wp-content/uploads/2019/07/cover-298x300.png 298w" sizes="(max-width: 606px) 100vw, 606px"></a>

<p class="move_to_wavesurfer>http://dev.chrislamdesign.com/shortwave/wp-content/uploads/2019/10/other_song.mp3</p>

</div>
        </div>

Answer 1

<p>In your PHP loop... maybe you can put the urls in a data attribute</p>

<button rel='song-switch' data-song-url='song-url-a'>
  play
</button>

<button rel='song-switch' data-song-url='other-song-url'>
  play
</button>

...

console.clear();
// I'd normally write this in plain JavaScript - but since you are using WordPress - it has jQuery already

function switchTrack(url) {
    // your code...
  alert('play the song ' + url);
}

// get references to the HTML(DOM) elements
var $switches = $('[rel="song-switch"]');

// add event listeners to each switch
$switches.each( function() {
  // $(this) refers to each switch
  $(this).on('click', function() {
    var url = $(this).data('song-url'); // get the value of that attr
        //
    switchTrack(url); // pass it into your function - to load a new track
    // and this is where you'd work with the player's api...
    // consider wrapping your current code in a function - or breaking it into some reusable functions
  });
});

// yes... you should use event delegation... but you can look that up in the future.

据我所见，您的代码 - 您可能没有脚本文件/或没有使用它 - 所以，请记住将此 JS 放在脚本标记中/或通常 - 只需确保它是在适合你的地方。

在这里您可以了解有关 jQuery 及其所有功能的更多信息：https://jquery.com/

https://jsfiddle.net/sheriffderek/teLm7drn

还有...请记住，使用 WordPress...您需要用类似这样的东西包装您的 jQuery 代码：

(function($) {
  // $ Works! You can test it with next line if you like
  // console.log($);
})( jQuery );

单击时使用 HTML 元素更改 Javascript 变量值 (wavesurfer.js)

Changing Javascript variable value with HTML element on click (wavesurfer.js)

javascript

jquery

html

wavesurfer.js