Bollate

HTML

[ANSWERED] html – Play an audio url using font awesome icon

By

Nov 20, 2022 ,

Solution 1 :

You will need javascript for it. Please run and check the code snippets for the function you need.

button {
  background: transparent;
  border: none;
}

button:focus {
  outline: none;
}
<head>
  <title>Font Awesome Icons</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <center>
    <button onclick=playMelodia()>
      <i class="fa fa-play-circle" style="font-size:150px;color:#1676cf"></i>
    </button>
    <audio id="melodia" controls="" style="display: none"><source src="http://i.streams.ovh:9523/stream.mp3" type="audio/mp3">Your browser does not support the audio element.</audio>

  </center>
  <script>
    function playMelodia() {
      document.getElementById("melodia").play();
    }
  </script>
</body>

Problem :

I need some help to make my button to play music when I push it and not to pop up to another page.

I’m using this code 

<head>
  <title>Font Awesome Icons</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <center>
    <a href="http://radio.melodiapatras.gr/listen/melodia.htm" target="_blank" rel="noopener">
      <i class="fa fa-play-circle" style="font-size:150px;color:#1676cf"></i>
    </a>
  </center>
</body>

Comments

Comment posted by Dionisis Stefanopoulos

I’m using visual composer and I’m putting my code on html5. I don’t know if there is a way to use JavaScript on visual composer.

Comment posted by yinsweet

@DionisisStefanopoulos I have updated the script to be written inside the body.

Comment posted by Dionisis Stefanopoulos

The only problem is that it has square around of the fa-circle. Maybe I’m doing something wrong

Comment posted by Dionisis Stefanopoulos

I putted