title: play sound when word clicked on anki flashcard
body: <p>I recently tried to modify a set of anki templates, forgive me for never learning css/html.
  I hide the play button of the word because it takes up too much space on my iPhone 6s, but sometimes I want to play the pronunciation of the word once manually.
  I would like to play the word by clicking the word text, but I don't know how to write the code, please can you help me?</p>
  <p>Thank you all!</p>
  <p><a href="https://i.stack.imgur.com/GEYf8.jpg" rel="nofollow noreferrer">source:sound</a></p>
  <p><a href="https://i.stack.imgur.com/eJOtr.jpg" rel="nofollow noreferrer">preview</a></p>
  <p>##frontside</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;a href="http://m.youdao.com/dict?le=eng&amp;q={{单词}}"&gt;
      &lt;div class="topbar light-r bg-r"&gt;RECITE│&lt;span id=time&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;/a&gt;
  
      &lt;p&gt;&lt;div class="word"&gt;{{单词}}&lt;/div&gt;
  
  {{#音标}}
      &lt;br&gt;&lt;div class="phoneticsymbol"&gt;{{音标}}&lt;/div&gt;
  {{/音标}}
  
      &lt;hr class="bg-r" style="width:100%;" /&gt;
  
  &lt;div style="display:none;"&gt;{{发音}}&lt;/div&gt;
              &lt;div class="en eg-r"&gt;{{例句}}&lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  function showLocale(objD)
      {   
          var hh = objD.getHours();
              if(hh&lt;10) hh = '0' + hh;
          var mm = objD.getMinutes();
              if(mm&lt;10) mm = '0' + mm;
                  str = hh + ":" + mm;   
              return(str);   
      }   
  function tick()   
      {   
          var today;   
          today = new Date();
          document.getElementById("time").innerHTML = showLocale(today);
          window.setTimeout("tick()", 1000);
      }   
      tick();
  &lt;/script&gt;
  &lt;!-- http://leaflyer.lofter.com --&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>##backside</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    &lt;div class="topbar light-r bg-r"&gt;RECITE│&lt;span id=time&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;/a&gt;
  
      &lt;p&gt;&lt;div class="word"&gt;{{单词}}&lt;/div&gt;
  
  {{#音标}}
      &lt;br&gt;&lt;div class="phoneticsymbol"&gt;{{音标}}&lt;/div&gt;
  {{/音标}}
  
  
  
      
      &lt;hr class="bg-r" style="width:100%;" /&gt;
  
  &lt;div style="display:none;"&gt;{{发音}}&lt;/div&gt;
              &lt;div class="en eg-r"&gt;{{例句}}&lt;/div&gt;
          {{#例句}}
  
  
              {{#例句翻译}}&lt;div class="zh eg-r"&gt;{{例句翻译}}&lt;/div&gt;{{/例句翻译}}
          {{/例句}}
  
      &lt;div class="slidetop"&gt;
          {{#释义}}
              &lt;div class="paraphrase"&gt;{{释义}}&lt;/div&gt;
          {{/释义}}
  
          {{#拓展}}
              &lt;hr class="bg-r"  style="width:95%"; /&gt;
              &lt;div class="hint"&gt;{{拓展}}&lt;/div&gt;
          {{/拓展}}
  
  
  &lt;/div&gt;
  
  &lt;div style='font-family: Arial; font-size: 20px;'&gt;&lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt;
      [].forEach.call(document.querySelectorAll('.paraphrase'),
         function(V0) {
            V0.innerHTML = V0.innerHTML
      .replace(/(\&amp;nbsp\;)/g,"\ ")
      .replace(/(\u00A0)/g,"&lt;br&gt;")
      .replace(/(\.\&lt;br\&gt;)/g,"\. ")
      .replace(/(\ vi\.\ )/g,"&lt;br&gt;&lt;h class=\"h\ bg\-r\"&gt;vi.&lt;/h&gt;")
      .replace(/(a\.\ )/g,"&lt;h class=\"h\ bg\-r\"&gt;a.&lt;/h&gt;")
      .replace(/(vi\.\ )/g,"&lt;h class=\"h\ bg\-r\"&gt;vi.&lt;/h&gt;")
      .replace(/(vt\.\ )/g,"&lt;h class=\"h\ bg\-r\"&gt;vt.&lt;/h&gt;")
      .replace(/(art\.\ )/g,"&lt;h class=\"h\ bg\-r\"&gt;art.&lt;/h&gt;")
      .replace(/(aux\.\ )/g,"&lt;h class=\"h\ bg\-r\"&gt;aux.&lt;/h&gt;")
      .replace(/(adj\.\ )/g,"&lt;h class=\"h\ bg\-r\"&gt;adj.&lt;/h&gt;")
      .replace(/(adv\.\ )/g,"&lt;h class=\"h\ bg\-r\"&gt;adv.&lt;/h&gt;")
      .replace(/(abbr\.\ )/g,"&lt;h class=\"h\ bg\-r\"&gt;abbr.&lt;/h&gt;")
      .replace(/(ad\.\ )/g,"&lt;h class=\"h\ bg\-r\"&gt;ad.&lt;/h&gt;")
      .replace(/(v\.\ )/g,"&lt;h class=\"h\ bg\-r\"&gt;v.&lt;/h&gt;")
      .replace(/(int\.\ )/g,"&lt;h class=\"h\ bg\-r\"&gt;int.&lt;/h&gt;")
      .replace(/(num\.\ )/g,"&lt;h class=\"h\ bg\-r\"&gt;num.&lt;/h&gt;")
      .replace(/(conj\.\ )/g,"&lt;h class=\"h\ bg\-r\"&gt;conj.&lt;/h&gt;")
      .replace(/(prep\.\ )/g,"&lt;h class=\"h\ bg\-r\"&gt;prep.&lt;/h&gt;")
      .replace(/(pron\.\ )/g,"&lt;h class=\"h\ bg\-r\"&gt;pron.&lt;/h&gt;")
      .replace(/(n\.\ )/g,"&lt;h class=\"h\ bg\-r\"&gt;n.&lt;/h&gt;")
      .replace(/(\&amp;amp\;\&lt;br&gt;)/g,"&lt;h class=\"hamp\ bg\-r\"&gt;\ &amp;\ &lt;/h&gt;");
   });
  &lt;/script&gt;
  
  
  &lt;!-- http://leaflyer.lofter.com --&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>##style</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*  Leaflyer-单词卡片模板 v1.6  */
  
  .eg-r b{background-color: #abd8f5;}
  
  
  @font-face { font-family: kt; src: url('_kt.ttf'); }
  @font-face { font-family: times; src: url('_times.ttf'); }
  
  .card { font-size: 15px; text-align: center; }
  
  .light-r { color: #b7d5eb; }
  .light-s { color: #c1e7b8; }
  .light-d { color: #f7c4b8; }
  
  .bg-r { background-color: #338eca; }
  .bg-s { background-color: #56a844; }
  .bg-d { background-color: #ec6c4f; }
  
  .eg-r { color:#222; background-color: #e9eff2; }
  .eg-s { color:#222; background-color:  #e9f4e7; }
  .eg-d { color:#222; background-color:  #f8eeec; }
  
  .night_mode .bg-r { background-color: #425c74; }
  
  #time { font: 600 18px/35px times ; letter-spacing: 0px ; }
  
  .topbar {
      font: 600 18px/35px times ;
      letter-spacing: 5px ;
      text-align: center ;
      border: 0px ;
      border-radius: 30px ;
      }
  
  .word { font: 32px/25px times; letter-spacing: 1px;}
  
  .phoneticsymbol {
      font: 20px/18px times;
      color:#666;
      text-align: center;
      }
  
  .h {
      font: 15px/20px times;
      color: #fff;
      padding: 0px 3px 2px 5px ;
      margin:0px 5px;
      border-radius: 2px;
      }
  
  .hamp {
      font: 20px/25px times;
      color: #fff;
      padding: 0px 0px 2px 0px ;
      margin:0px -13px 0px -9px;
      border-radius: 3px;
      }
  
  .paraphrase {
      font: 18px/25px kt;
      color;
      text-align: left;
      margin-left:.3em;
      }
  
  .en {
      font: 18px/25px times;
      text-align:left; 
      padding: 0.5em;
      margin-left: 0.2em; 
      }
  
  .zh { 
      font: 18px/18px kt;
      text-align:left;
      padding: 0.5em;
      margin: -0.5em 0em 0em 0.2em;
      }
  
  .btn { opacity:0.9; position:fixed; right:10px; bottom:10px; }
  .btn:active { opacity:1; }
  
  
  
  .hint {
      font: 22px/25px kt;
      text-align: left;
  #   text-decoration:none;
      padding: 0px 10px;
      }
  
  u {
      text-decoration: none;
      display: inline;
  #   background-color: #ffff75;
      border-bottom: 2px solid #ec6c4f;
      }
  
  a { text-decoration:none; }
  
  hr {
      height: 2px;
      border-radius:2px;
      width:70%;
      display:inline-block;
      border:0px solid #ffffff;
      vertical-align: middle;
      box-shadow: 0px 2px 4px  2px #eee;
   }
  
  .win hr {
      vertical-align:middle;
      margin-right: 0.2em;
      margin-left: 0.2em;
  }
  
  
  #typeans {
      font: 30px/35px times;
  }
  
  .typeGood {
      border: 2px solid #56a844;
      border-radius:0px;
      height: 20px;
      background-color: #56a844;
      font: 30px/32px times;
      text-align:center;
      letter-spacing: 1px;
      word-spacing: 1px;
      color: white;
      padding: 0px 0px 2px 0px;
  }
  
  /*正确的样式*/
  
  
  .typeMissed {
      border: 2px solid #ec6c4f;
      border-radius:0px;
      font: 30px/32px times;
      background-color: #ec6c4f;
      text-align:center;
      letter-spacing: 1px;
      word-spacing: 1px;
      color: white;
      padding: 0px 0px 2px 0px;
  
  }
  
  /*遗漏的样式*/
  
  
  .typeBad {
      border: 2px solid #728d98;
      border-radius:0px;
      font: 30px/32px times;
      background-color: #728d98;
      letter-spacing: 1px;
      word-spacing: 1px;
      color: white;
      padding: 0px 0px 2px 0px;
  
  }
  
  /*错误的样式*/
  
  
  .slidetop {
      position:relative;
      -webkit-animation: slidetop 0.5s 0s;
      -webkit-animation-fill-mode:forwards;
      }
  
  @-webkit-keyframes slidetop {
      0%  { opacity: 0;  top:50px;}
      50% { opacity: 0.8;  top:-5px;}
      80% { opacity: 0.95;  top:0px;}
      100%    { opacity: 1; top:0px;}
      }
  
  /* */</code></pre>
  </div>
  </div>
  </p>