H5页面使用audio标签播放音频（html5video标签）越早知道越好

文章摘要

这篇文章介绍了如何在HTML和CSS中实现一个简单的媒体播放器功能。代码中包含一个音频元素和一个按钮，按钮点击可以触发音频的播放或暂停。通过JavaScript函数`autoPlay()`，实现了自动播放功能：当音频处于静默状态时，按钮点击会启动播放，状态变为静默；反之，则会暂停音频并切换按钮状态。此外，代码还通过CSS样式实现了按钮的视觉效果，包括播放和暂停状态下的样式差异。整体而言，文章重点展示了如何通过代码实现音频播放器的自动化控制功能。

<a class=”play” id=”audioBtn” style=”cursor:pointer;” οnclick=”autoPlay()”></a>
?<audio id=”bgMusic” src=”https://www.jb51.net/article/js/2.mp3″ autoplay preload loop=”loop”></audio>
?css.pause {
? ? ? ? ? ? ?height: 50px;
? ? ? ? ? ? ?background: url(images/musicbtn.png) no-repeat;
? ? ? ? ? ? ?display: block;
? ? ? ? ? ? ?background-position: 0 bottom;
? ? ? ? ?}

? ? ? ? ?.play {
? ? ? ? ? ? ?height: 50px;
? ? ? ? ? ? ?background: url(images/musicbtn.png) no-repeat;
? ? ? ? ? ? ?display: block;
? ? ? ? ?} js
function autoPlay() {
? ? ? ? ? ? ?var myAuto=document.getElementById(‘bgMusic’);
? ? ? ? ? ? ?var btn=document.getElementById(‘audioBtn’);
? ? ? ? ? ? ?if (myAuto.paused) {
? ? ? ? ? ? ? ? ?myAuto.play();
? ? ? ? ? ? ? ? ?btn.classList.remove(“pause”);
? ? ? ? ? ? ? ? ?btn.classList.add(“play”);
? ? ? ? ? ? ?} else {
? ? ? ? ? ? ? ? ?myAuto.pause();

? ? ? ? ? ? ? ? ?btn.classList.remove(“play”);
? ? ? ? ? ? ? ? ?btn.classList.add(“pause”);
? ? ? ? ? ? ?}

? ? ? ? ?}