如何将背景音乐的播放/暂停点击按钮替换为图片按钮？

没问题！把文字式的播放、暂停按钮换成图片按钮其实很简单，这里给你两种实用的实现方式：

方法1：直接使用<img>标签作为可点击按钮 #

这种方式最直接，用图片标签替代按钮标签，给它绑定点击事件就行，代码如下：

<audio id="player" autoplay="autoplay" loop="loop" src="file://C:\Users\Sony\Desktop\folder\cop\music\Rapsody.mp3"></audio>

<!-- 播放图片按钮 -->
<img src="play-icon.png" alt="播放" onclick="document.getElementById('player').play()" style="cursor: pointer; width: 50px; height: 50px;">

<!-- 暂停图片按钮 -->
<img src="pause-icon.png" alt="暂停" onclick="document.getElementById('player').pause()" style="cursor: pointer; width: 50px; height: 50px;">

注意：记得把play-icon.png和pause-icon.png替换成你自己的图片路径（可以是相对路径或绝对路径），cursor: pointer是让鼠标移上去显示手型，提升用户体验。

方法2：给<button>设置背景图片（保留按钮语义） #

如果想保留<button>的语义（对无障碍访问更友好），可以给按钮添加背景图片，同时去掉默认按钮样式：

<audio id="player" autoplay="autoplay" loop="loop" src="file://C:\Users\Sony\Desktop\folder\cop\music\Rapsody.mp3"></audio>

<!-- 播放按钮 -->
<button onclick="document.getElementById('player').play()" style="border: none; background: url('play-icon.png') no-repeat center; background-size: cover; width: 50px; height: 50px; cursor: pointer;"></button>

<!-- 暂停按钮 -->
<button onclick="document.getElementById('player').pause()" style="border: none; background: url('pause-icon.png') no-repeat center; background-size: cover; width: 50px; height: 50px; cursor: pointer;"></button>

这种方式下，按钮本身还是<button>元素，但外观是你设置的图片，同样要替换图片路径，调整宽高适配你的图片尺寸。

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