Как отключить кнопку воспроизведения/паузы аудиоэлемента html5

Question

Каков способ отключения или предотвращения событий с помощью кнопки воспроизведения/паузы в аудиоэлементе html5?

Я пытаюсь что-то вроде этого:

document.getElementById(id).addEventListener("pause", function() { 
    $(this).trigger("play"); 
}); 

Это работает, когда в одиночку, но моя проблема заключается в том, что я хотел бы контролировать воспроизведение/паузу при нажатии на DIV, где звуковой элемент находится в:

<div id="my_div"> 
    <audio controls id="my_audio"> 
     <source src="my_song.mp3" type="audio/mpeg"> 
    </audio> 
</div> 

var is_playing; 
$("#my_div").click(function() { 
    if (is_playing) { 
     $('#my_audio').trigger("pause"); 
     is_playing = false; 
    } else { 
     $('#my_audio').trigger("play"); 
     is_playing = true; 
    } 
}); 

так что это приводит к конфликту, когда я использую кнопки паузы/воспроизведения на аудио элемента. Таким образом, я ищу способ предотвратить случай воспроизведения элемента управления воспроизведением/паузой (но не все элементы управления, поскольку мне нужно использовать поиск и объем).

Answer 1

play и pause не являются методами jQuery. Попробуйте позвонить .play(), .pause() на <audio> элемент

$(function() { 
    var is_playing; 
    $("#my_div").click(function(e) { 
    // if `e.target` is not `<audio>` element 
    if(e.target.tagName !== "AUDIO") { 
     if (is_playing) { 
     $('#my_audio')[0].pause(); 
     is_playing = false; 
     } else { 
     $('#my_audio')[0].play(); 
     is_playing = true; 
     } 
    } else { 
     e.stopPropagtion() 
    } 
    }); 
}); 

plnkr http://plnkr.co/edit/l5NejZ4rvxTZLPghkFWF?p=preview