Question

我正在尝试将播放/暂停文本更改为“图像”，但是我正在努力做到这一点。这是我的源代码的一部分：

HTML：

<body>
<button id="audioControl" onclick="Play()">Play</button>
<canvas id="progress" width="500" height="100"></canvas>
<audio id="audio" ontimeupdate="progressBar()" 
  src="horse.mp3">
</audio>
<br>

JS：

var audioElement = document.getElementById("audio")
var canvas = document.getElementById("progress").getContext('2d')
var audio_ctrl = document.getElementById('audioControl')
function Play() {
var play = audio_ctrl.innerHTML === 'Play'
var method
if (play) {
 audio_ctrl.innerHTML = 'Pause'
method = 'play'
} else {
 audio_ctrl.innerHTML = 'Play'
 method = 'pause'
}
audioElement[method]()
}

任何人都可以帮助我更改此播放/暂停图像吗？

Answer 1

您只需要将按钮更改为其他元素，对其进行样式设置并在其上单击就可以播放。

在这里，我更新/扩展了您的代码：

<body>
<button id="audioControl" onclick="Play()">Play</button>
<div id="audioControlImage" style="width: 50px; height: 50px; background: url('https://image.flaticon.com/icons/svg/149/149668.svg')" onclick="Play()"></div>
<canvas id="progress" width="500" height="100"></canvas>
<audio id="audio" ontimeupdate="progressBar()" 
  src="https://sample-videos.com/audio/mp3/crowd-cheering.mp3">
</audio>
<br>
<script>
var audioElement = document.getElementById("audio")
var canvas = document.getElementById("progress").getContext('2d')
var audio_ctrl = document.getElementById('audioControl')
var audio_ctrl_image = document.getElementById('audioControlImage')

function Play() {
    var play = audio_ctrl.innerHTML === 'Play'
    var method
    if (play) {
        audio_ctrl.innerHTML = 'Pause'
        audio_ctrl_image.style.background = "url('https://image.flaticon.com/icons/svg/8/8725.svg')"
        method = 'play'
    } else {
        audio_ctrl.innerHTML = 'Play'
        audio_ctrl_image.style.background = "url('https://image.flaticon.com/icons/svg/149/149668.svg')"
        method = 'pause'
    }
    audioElement[method]()
}
</script>
</body>

playPause按钮而不是javascript中的文本

1 个答案: