How to toggle (play/stop) a hidden amp-audio element on a web page while simultaneously toggling the amp-img used to toggle the amp-audio?

Question

How to toggle (play/stop) a hidden <amp-audio> element on an AMP-HTML web page while simultaneously toggling the <amp-img> used to toggle the <amp-audio>?

E.g.,

How would the narration button effect on this HTML5-based page (image included), https://www.jamesandersonjr.com be duplicated/reproduced in AMP-HTML compliant code on this AMP-HTML page?: https://amp.jamesandersonjr.com

Here's what I have thus far:

<amp-img src="/images/ui/svgs/monochrome/speak-outline.svg" width="20" height="20" class="no_brdrs_forc no_txt_deco_forc no_sel_forc img_bttn_sml hgt_20px_forc vert_algn_0px" alt="&#128266; Hear audio narration." title="&#128266; Hear audio narration." role="button" tabindex="1" on="tap:aud_nar.play">
<amp-audio id="aud_nar" layout="nodisplay" src="/assets/audio/custom/txt-to-spch/jms-andrsn-jr-hm-pg.mp3"></amp-audio>
</amp-img>