Wavesurfer播放器接入CursorPlugin及动态播放按钮实现求助

已实现需求 #

• 成功接入CursorPlugin光标插件，支持波形区域悬停显示时间戳
• 播放/暂停按钮动态切换：播放状态显示「Pause」，暂停状态显示「Play」

完整修改后代码 #

<html>
<head>
<title>Waveform Player</title>
<script src="https://unpkg.com/wavesurfer.js/dist/wavesurfer.min.js"></script>
<!-- 新增CursorPlugin插件依赖引入 -->
<script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.cursor.min.js"></script>
<script>
function hide_player() {
  var x = document.getElementById("player");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
} 
</script>
<style>
html
{
    height: 1500px;
}
</style>
</head>
<body>
<iframe src="http://example.org" height="100%" width="100%"></iframe>

<div style="position: fixed; bottom: 0; right: 0; z-index: 999; display: block; width: 123px; float: right;">
<button onclick="hide_player()">Hide/Show Player</button>
</div>

<div style="position: fixed; z-index: 100; bottom: 0; left: 0; width: 100%; background-color: grey;" id="player">

<div id="waveform"></div>

<table border="0" align="center">
<tr>
<td><button onclick="wavesurfer.skipBackward()"><<<</button></td>
<!-- 给播放暂停按钮添加id方便DOM操作 -->
<td><button id="playPauseBtn" onclick="wavesurfer.playPause()">Play</button></td>
<td><button onclick="wavesurfer.skipForward()">>></button></td>
<td>Volume:</td>
<td>
<input id="volumeSlider" type="range" name="volume-slider" min="0" max="100" value="50"/>
</td>
<td>
Time:
<span id="currentTime">00:00:00</span>
<span>/</span>
<span id="totalDuration">00:00:00</span>
</td>
</tr>
</table>

</div>
</body>

<script>
//Timecode
const currentTime = document.querySelector("#currentTime")
const totalDuration = document.querySelector("#totalDuration")
const playPauseBtn = document.querySelector("#playPauseBtn")

//Volume Control
const volumeSlider = document.querySelector("#volumeSlider")

//Load Wavesurfer and options，新增cursor插件配置
var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'blue',
    backgroundColor: 'green',
    responsive: true,
    plugins: [
        WaveSurfer.cursor.create({
            showTime: true,
            opacity: 1,
            customShowTimeStyle: {
                'background-color': '#000',
                color: '#fff',
                padding: '3px',
                'border-radius': '3px',
                'font-size': '12px'
            }
        })
    ]
});

//Volume Control
const handleVolumeChange = e => {
// Set volume as input value divided by 100
// NB: Wavesurfer only excepts volume value between 0 - 1
const volume = e.target.value / 100

wavesurfer.setVolume(volume)

// Save the value to local storage so it persists between page reloads
localStorage.setItem("audio-player-volume", volume)
}

const setVolumeFromLocalStorage = () => {
// Retrieves the volume from local storage, or falls back to default value of 50
const volume = localStorage.getItem("audio-player-volume") * 100 || 50

volumeSlider.value = volume
}

//Load Track
wavesurfer.load('http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');

//Volume Control
window.addEventListener("load", setVolumeFromLocalStorage)
volumeSlider.addEventListener("input", handleVolumeChange)

//Timecode
const formatTimecode = seconds => {
return new Date(seconds * 1000).toISOString().substr(11, 8)
}

// 播放状态监听，动态切换按钮文案
wavesurfer.on('play', () => {
    playPauseBtn.innerText = 'Pause'
})
wavesurfer.on('pause', () => {
    playPauseBtn.innerText = 'Play'
})

wavesurfer.on("ready", () => {
// Set wavesurfer volume
wavesurfer.setVolume(volumeSlider.value / 100)

// Timecode
const duration = wavesurfer.getDuration()
totalDuration.innerHTML = formatTimecode(duration)
// 初始化按钮状态，默认暂停显示Play
playPauseBtn.innerText = 'Play'
})

wavesurfer.on("audioprocess", () => {
const time = wavesurfer.getCurrentTime()
currentTime.innerHTML = formatTimecode(time)
})

//Spacebar starts player
document.body.onkeyup = function(e){
    if(e.keyCode == 32){
wavesurfer.playPause()
    }
}
window.addEventListener('keydown', function(e) {
  if(e.keyCode == 32 && e.target == document.body) {
    e.preventDefault();
  }
});
</script>
</html>

内容的提问来源于stack exchange，提问作者Michael_