Заменить кнопку с изображением

Question

Попытка заменить кнопки onclick пользовательским изображением.Пока у меня есть:

Как мне сделать так, чтобы было изображение, которое работает как кнопка воспроизведения для моей фоновой музыки?

<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()"> Play </button> 
  <button onclick="document.getElementById('player').pause()">Pause</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()"> Play </button> 
  <button onclick="document.getElementById('player').pause()">Pause</button> 

Спасибо заранее!

Answer 1

Если вы хотите заменить его на изображение, вы можете скрыть его и использовать кнопку, чтобы щелкнуть по нему.

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

И после выше, вы можете добавить изображение

<img src="x.png" onclick="$("#player").play();">

Не тестировал его, но я уверен, что это работает