Я пытаюсь получить 1 кнопку, чтобы контролировать как воспроизведение, так и паузу, может кто-то мне помочь?

Question

Я пытаюсь получить 1 кнопку для управления воспроизведением и паузой, может кто-нибудь мне помочь? И я действительно хочу это сделать, используя приведенный ниже код. Надеюсь, кто-то сможет с этим справиться. https://jsfiddle.net/8e68js93/1/

Я знаю об этом коде, но я не знаю, как его включить в приведенные ниже коды. [this.paused?this.play():this.pause();] И если он не может использоваться с приведенными ниже кодами, я не хочу его использовать.

<audio id="player" src="http://hi5.1980s.fm/;"></audio> 
    <div> 
     <button onclick="document.getElementById('player').play()">Play</button> 
     <button onclick="document.getElementById('player').pause()">Pause</button> 
     <button onclick="document.getElementById('player').pause() ;document.getElementById('player').currentTime=0;">Stop</button> 
     <button onclick="document.getElementById('player').muted=!document.getElementById('player').muted">Mute/ Unmute</button> 
    </div> 

Answer 1

<audio id="player" src="http://hi5.1980s.fm/;"></audio> 
    <div> 
     <button onclick="togglePlay()">Play</button> 
     <button onclick="togglePlay()">Pause</button> 
     <button onclick="document.getElementById('player').pause();document.getElementById('player').currentTime = 0;">Stop</button> 
     <button onclick="document.getElementById('player').muted = !document.getElementById('player').muted">Mute/ Unmute</button> 
    </div> 

    <script> 
     function togglePlay() { 
      var player = document.getElementById('player'); 
      if (player.paused) { 
       player.play(); 
      } else { 
       player.pause(); 
      } 
     } 
    </script> 

Или все инлайн:

<button onclick="var player = document.getElementById('player'); player.paused ? player.play() : player.pause()">Play</button> 

Answer 2

Я думаю, вы должны использовать JQuery для этого.