Play Sound when Font Awesome Icon is Clicked

Question

Instead of having the audio bar in display, is it possible to set a Font Awesome icon as an audio player (e.g. audio would play when click the icon) using HTML?

 <audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

Answer 1

Im a little confused about what your asking, based of your first post.

You'd like to play an audio file when someone clicks a icon on your website that is html?

You can do this by attaching javascript to the onclick parameter of the icon.

<!-- Your Play Button -->
<i class="fa fa-play pointer" onclick="playsound()"></i>

<!-- Your audio source -->
<audio id="audio" style="display:none" src="audio_source.ogg" ></audio>

<!-- Your javascript function -->
<script>
  function playsound(){
       var audio = document.getElementById("audio");
       audio.play();
                 }
</script>
<!-- Sourced from https://stackoverflow.com/questions/18826147/javascript-audio-play-on-click -->

Further expanding on that, you may want to add css (style rules) to your icon to display a curser.

<style>
.pointer{
    cursor:pointer;
}
</style>