首页手记 audio之点击图标切换音频播放状态以及替换当前图标

audio之点击图标切换音频播放状态以及替换当前图标

标签：

Html/CSS

audio的一些基本属性：（通俗的理解）

　　controls: 向用户显示控件，如播放按钮；

　　src: 播放音频的url路径；

　　autoplay: 当视频就绪后马上播放；

　　loop: 重复播放；

　　muted: 静音属性；

　　poster: 在下载时现实的图像，直到点击播放；

　　paused: 判断音频是否已停止；

audio的一些基本方法：（通俗的理解）

　　play()：播放歌曲；

　　pause()：暂停歌曲；

　　load()：重新加载歌曲；

大致了解这些属性和方法过后，那我们就开始编写代码吧！

　　html代码：

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title>

　　　　<style>
　　　　　　.xixi{
　　　　　　　　position: absolute;
　　　　　　　　top: 0;
　　　　　　　　right: 0;
　　　　　　　　width: 50px;
　　　　　　　　height: 50px;
　　　　　　}
　　　　</style>

</head> <body>          <!--定义音频，src为你要播放的音乐-->     <audio class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="music/music.mp3" id="music" ></audio>          <!--img标签为控制音频的一个按钮-->     <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imgs/musicBtnOff.png" class="xixi" onclick="play()" />      </body> </html>

　　js代码：

<script>     function play(){         //获取到你所定义的音频标签         var audios = document.getElementById("music");         //获取到img标签         var xixi = document.querySelector(".xixi");         //判断音频是否停止         if(audios.paused){             //如果已停止则播放音频并更换图标             xixi.src = "imgs/musicBtn.png";                          audios.play();         }else{             //如果已停止重新加载音频并关闭音频和更换图标             xixi.src = "imgs/musicBtnOff.png";                          audios.pause();                          audios.load();         }     } </script>

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　嘻嘻，快去试试吧。。。

原文出处

点击查看更多内容