使用字体真棒图标播放音频网址答案

【问题标题】：Play an audio url using font awesome icon使用字体真棒图标播放音频网址
【发布时间】：2020-06-15 17:35:46
【问题描述】：

我需要一些帮助来让我的按钮在我按下它时播放音乐而不是弹出到另一个页面。

我正在使用此代码

<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>

【问题讨论】：

标签： html button

【解决方案1】：

您将需要 javascript。请运行并检查代码 sn-ps 以获得您需要的功能。

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>

【讨论】：

我正在使用可视化作曲家，并将我的代码放在 html5 上。不知道有没有办法在visual composer上使用JavaScript。
@DonisisStefanopoulos 我已经更新了要写入正文的脚本。
唯一的问题是它的fa-circle周围是方形的。也许我做错了什么
我将按钮的
是不是因为音源也没有声音？你可以从你上面开始的链接中查看来源