文章摘要
这篇文章描述了一个自定义Flash播放器的实现方法，通过HTML、CSS和JavaScript技术结合。主要内容包括：1）使用`<audio>`元素嵌入背景音乐；2）通过JavaScript函数`autoPlay()`实现播放器的自定义播放功能，包括播放、暂停以及状态切换；3）在播放时隐藏音频按钮并显示音乐播放按钮，并通过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”);
? ? ? ? ? ? ?}
? ? ? ? ?}