问使用Javascript的responsiveVoice数组

EN

      var cards = [
            { animal: "Dog", animal_type: "A" },
            { animal: "Pig", animal_type: "B" },
            { animal: "Hippopo", animal_type: "B" },
            { animal: "Cat", animal_type: "A" },
        ];

        const
            $card = document.querySelector('.card'),
            $demo = document.querySelector('#demo');
        let display_text = true;

        
        
        $card.addEventListener('click', function () {
            $card.classList.toggle('is-flipped');
            

            if (display_text) {
                
                var random_num = Math.floor(Math.random() * 4);
                $demo.innerHTML = cards[random_num].animal;
              
                //here
                 $("#demo").hover(function(){
                      speak();
                   });
                
                 function speak() {
                    responsiveVoice.speak(cards[random_num].animal, "UK English Male");
                }
                
                //end
                
                
            }

            display_text = !display_text;
        });

        body { font-family: sans-serif; }

        .scene {
          width: 308px;
          height: 446px;
          border: 1px solid #CCC;
          margin: 40px 0;
          perspective: 600px;
        }

        .card {
          width: 100%;
          height: 100%;
          transition: transform 1s;
          transform-style: preserve-3d;
          cursor: pointer;
          position: relative;
        }

        .card.is-flipped {
          transform: rotateY(180deg);
        }

        .card__face {
          position: absolute;
          width: 100%;
          height: 100%;
          /*line-height: 260px;*/
          color: white;
          text-align: center;
          font-weight: bold;
          font-size: 40px;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
        }

        .card__face--front {
          /*background: red;*/
        }

        .card__face--back {
          background: #009688; 
          transform: rotateY(180deg);
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scene scene--card">
      <div class="card">
        <div class="card__face card__face--front">
          <img src="./css/images/pokemon_card.png" width="304" height="442" alt="">
        </div>
        <div class="card__face card__face--back">
            <p id="demo">Back</p>
        </div>
      </div>
    </div>
    <p>Click card to flip.</p>  
    
    
    
    <!-- web speech api --> 
    <script src="https://code.responsivevoice.org/responsivevoice.js?key=QugTbpmd"></script> 
    
    



</body>
</html>