点击文字/图片播放音乐，再点击暂停

今天一整天都在折腾 PJAX 功能, 其目的是想实现网页歌曲换页不中断的效果。找了半天都没有找到可以实现的办法，网上写的教程对于我来说是完全看不懂。然后偶然间找到了一个点击播放再点击停止音乐的教程，觉得蛮好玩的，试了一下还可以，便分享出来。

其实实现起来非常的简单，只要在页脚文件 foot.php 或者 footer.php 里最下面加入以下代码：

<script>

var bgaudiocount = 0;
        function bgaudio(){       
            ++bgaudiocount;
            if(bgaudiocount % 2 == 1){document.getElementById("bgaudio").play();}else{document.getElementById("bgaudio").pause();}
          
        }
</script>
<audio src=" 音乐地址 " id="bgaudio"></audio>

然后在任何位置放入以下代码：

<span  onclick="bgaudio()"> 点我 </span>    

然后可以简单的美化一下:

<span style="position: relative;display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;background: #000000;border-radius: 50%;cursor: pointer;margin-top: 15px;box-shadow: 0 0 10px rgba(0,0,0,0.1), 0 5px 20px rgba(0,0,0,0.2);-webkit-transform: scale(0);transform: scale(0);transition: -webkit-transform 0.35s;transition: transform 0.35s;transition: transform 0.35s, -webkit-transform 0.35s;"onclick="bgaudio()"> 点我 </span>