我正在使用 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 打印在一个带有“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>