How to play a hidden AMP-Audio on AMP-Image click on an AMP-HTML page (Full Page Example)?

Question

How to play a hidden AMP-Audio on AMP-Image click on an AMP-HTML page (Full Page Example)?

158 Views Asked by James Anderson Jr. At 23 July 2023 at 04:20

How to play a hidden audio file, presumably via an AMP-Audio (<amp-audio></amp-audio>) component on a AMP-HTML page element click, specifically an AMP Image (<amp-img></amp-img>) click?

Specifically, what I'm ultimately trying to do is duplicate the functionality of the speaker image beside my name on this page: https://m.jamesandersonjr.com, on this page: https://amp.jamesandersonjr.com, but the page must validate following all known AMP rules.

Please let me know if this question is a duplicate, but I could not find a similar suitable solution anywhere on S.O.

Original Q&A

There are 1 best solutions below

**James Anderson Jr.** · Answer 1 · 2023-07-25T04:05:14.527000

I solved the issue. Here is an example solution for those who need it.

<!DOCTYPE html>
<html amp lang="en">

<head>

<meta charset="utf-8">

<title>AMP Validated Demo: Play Audio File on AMP Image Click</title>

<link rel="canonical" href="https://www.example.com">

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

<style amp-boilerplate>

body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}

</style>

<noscript>

<style amp-boilerplate>

body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}

</style>

</noscript>

<style amp-custom>

h1{font-family:Arial, Helvetica, sans-serif;color:#006EDB;font-size:188%;font-weight:600;}

</style>

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>

</head>

<body>

<h1>How to Play a Hidden Audio File on Click</h1>

<amp-img width="32" height="32" alt="&#128266; Hear Audio Track." title="&#128266; Hear Audio Track." role="button" tabindex="1" on="tap:nm_pron.play" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLQpUaGlzIFNWRyBpbWFnZSBmaWxlIGlzIHRoZSBzb2xlIHByb3BlcnR5IG9mIEphbWVzIEFuZGVyc29uIEpyLiB8IFdlYjogWyBodHRwczovL3d3dy5qYW1lc2FuZGVyc29uanIuY29tIF0uIApJZiB5b3UgZmluZCB0aGlzIFNWRyBpbWFnZSBmaWxlIGRpc3BsYXllZCBvbiBhbnkgb3RoZXIgd2Vic2l0ZSBvbiB0aGUgd2ViLCBiZXNpZGVzIHRoZSBvbmVzIGZvdW5kIGluIHRoaXMgCmxpc3QgWyBodHRwczovL3d3dy5qYW1lc2FuZGVyc29uanIuY29tL3dlYnNpdGVzLnBocCBdLCB0aGVuIGl0IGNvdWxkIGJlIHByZXN1bWVkIHRoYXQgaXQgd2FzIGxpa2VseSBzdG9sZW4uIApQbGVhc2UgcmVwb3J0IGFueSBhbmQgYWxsIGFzc2V0IHRoZWZ0cyB0byBtZSwgaGVyZSBbIGh0dHBzOi8vd3d3LmphbWVzYW5kZXJzb25qci5jb20vY29udGFjdC1qYW1lcy5waHAgXS4KVGhhbmsgeW91IGluIGFkdmFuY2UgZm9yIHlvdXIgaGVscCBpbiBjb21iYXRpbmcgb25saW5lIGNvbnRlbnQgdGhlZnQuIAoKUmVnYXJkcywKSmFtZXMgQW5kZXJzb24gSnIuCi0tPgo8c3ZnIHZpZXdCb3g9IjAgMCA0OCA0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGQ9Ik0xNCwzMkg3Yy0xLjEsMC0yLTAuOS0yLTJWMThjMC0xLjEsMC45LTIsMi0yaDdWMzJ6IiBmaWxsPSIjNTQ2RTdBIi8+Cgk8cGF0aCBkPSJtMjYgNDItMTItMTB2LTE2bDEyLTEweiIgZmlsbD0iIzc4OTA5QyIvPgoJPHBhdGggZD0ibTI4IDE3LjN2Mi4xYzEuOCAwLjggMyAyLjUgMyA0LjYgMCAyLTEuMiAzLjgtMyA0LjZ2Mi4xYzIuOS0wLjkgNS0zLjUgNS02LjdzLTIuMS01LjgtNS02Ljd6IiBmaWxsPSIjMDNBOUY0Ii8+Cgk8cGF0aCBkPSJtMjggMTIuMnYyYzQuNiAwLjkgOCA1IDggOS44cy0zLjQgOC45LTggOS44djJjNS43LTEgMTAtNS45IDEwLTExLjhzLTQuMy0xMC45LTEwLTExLjh6IiBmaWxsPSIjNEZDM0Y3Ii8+Cjwvc3ZnPg==">
<amp-audio id="nm_pron" layout="nodisplay" src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3"></amp-audio>
</amp-img>

</body>
</html>

How to play a hidden AMP-Audio on AMP-Image click on an AMP-HTML page (Full Page Example)?

There are 1 best solutions below

Related Questions in AUDIO

Related Questions in AMP-HTML

Trending Questions

Popular # Hahtags

Popular Questions