Javascript HTML5 更改图标用于 fa-play

Javascript HTML5 change icon for fa-play

本文关键字：用于 fa-play 图标 HTML5 Javascript      更新时间：2023-09-26

我在我的网站上添加了音频（自动播放）。其实我想暂停一下，播放音乐，该图标也应同时切换以fa-play 。

这是我的 HTML 标记：

<script type="text/javascript">
    function toggleSound() {
        var audioElem = document.getElementById('player');
        if (audioElem.paused)
            audioElem.play();
        else
            audioElem.pause();
    }
</script>

<li>
    <a class="fa fa-pause" id="player" type="button"
  onclick="javascript:toggleSound();">
        <span>Play/Pause</span>
    </a>
</li>

<audio autoplay id="player" src="embrace.mp3"></audio>

你可以用这个来完成你的JS：

<script>
    function toggleSound() {
       var audioElem = document.getElementById('player');
       if (audioElem.paused) {
          audioElem.className = "fa fa-play";
          audioElem.play();
       } else {
          audioElem.className = "fa fa-pause";
          audioElem.pause();
       }
    }
</script>

编辑：如果您希望在执行单击时调用该函数，则应将该函数绑定到事件click。有几种方法，但最简单的是这样的：

<a class="fa fa-pause" onclick="toggleSound()" >

你可以在任何DOM元素中做到这一点，而不仅仅是在<a>中，这只是一个例子。

相关文章：