Phát/Tạm dừng Nút Âm thanh HTML5

Question

Tôi đang cố gắng để có được Âm thanh HTML5 để phát/tạm dừng trong một nút. Làm thế nào tôi có thể đi xung quanh làm điều này? Vì vậy, nút phát chuyển sang biểu tượng tạm dừng là phông chữ tuyệt vời 'fa fa-pause' Mã ở đây:

<audio id="myTune"> 
<source src="http://96.47.236.72:8364/;"> 
</audio> 
<div class="btn-group btn-group-xs"> 
<a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview"  onclick="document.getElementById('myTune').play()"><i class="fa fa-play"></i></a> 

Cảm ơn bạn!

Answer 1

Bạn có thể đặt một id cho thẻ <i> và gán lớp fa fa-pause khi thay đổi trạng thái:

<a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview" onclick="aud_play_pause()"><i id="stateicon" class="fa fa-play"></i></a> 

<script> 
    function aud_play_pause() { 
    var myAudio = document.getElementById("myTune"); 
    if (myAudio.paused) { 
     $('#stateicon').removeClass('fa fa-play'); 
     $('#stateicon').addClass('fa fa-pause'); 
     myAudio.play(); 
    } else { 
     $('#stateicon').removeClass('fa fa-pause'); 
     $('#stateicon').addClass('fa fa-play'); 
     myAudio.pause(); 
    } 
} 

Hy vọng điều này sẽ giúp

Answer 2

này cung cấp cho một whirl:

function aud_play_pause() { 
 
    var myAudio = document.getElementById("myTune"); 
 
    if (myAudio.paused) { 
 
    myAudio.play(); 
 
    } else { 
 
    myAudio.pause(); 
 
    } 
 
}

<audio id="myTune" src="http://www.rachelgallen.com/HappyBirthday.mp3"></audio> 
 

 

 
<button type="button" onclick="aud_play_pause()">Play/Pause</button>

Answer 3

đây Bạn có phiên bản dành cho nhiều trường hợp của máy nghe nhạc

HTML

<a href="javascript:void(0)" onclick="aud_play_pause(this)"> 
    <i class="control icon-play"></i> 
    <audio class="xnine-player" src="/path/to/file#1.mp3" preload="auto"></audio> 
</a> 

<a href="javascript:void(0)" onclick="aud_play_pause(this)"> 
    <i class="control icon-play"></i> 
    <audio class="xnine-player" src="/path/to/file#2.mp3" preload="auto"></audio> 
</a> 

JAVASCRIPT

<script> 
    function aud_play_pause(object) { 
     var myAudio = object.querySelector(".xnine-player"); 
     var myIcon = object.querySelector(".control"); 
     if (myAudio.paused) { 
      myIcon.className = "control icon-pause"; 
      myAudio.play(); 
     } else { 
      myIcon.className = "control icon-play"; 
      myAudio.pause(); 
     } 
    } 
</script> 

...