单击音乐图标，实现音乐的暂停与播放。

今天训练H5大赛的时候学习到了一个新的内容，就是以上的题目。
一共三部曲。
废话不多说，上代码。
1、创建一个.html页面，并且引入音乐和图标，用来实现网页的显示。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>单击音乐图标实现暂停与播放。</title><!-- 音乐css样式 --><link rel="stylesheet" type="text/css" href="css/css.css"/></head><body style="background-color: cornflowerblue;"><!-- 导入音乐，并且给音乐设置id，后面要用到。 --><audio id="music" autoplay="autoplay" loop="loop" src="media/BGM.mp3" ></audio><!-- 导入音乐图标，并且给音乐图标设置id，后面还是要用到。 --><img id="musicico" onclick="musiccc()" src="img/音乐ico.png" width="200px" ></body><!-- 引入script逻辑代码。 --><script type="text/javascript" src="js/js.js"></script>
</html>

2、创建一个.js页面，用来实现逻辑代码。

// 动画旋转
var music = document.getElementById('music')    //获取音乐
var musicico = document.getElementById('musicico')   //获取音乐图标
var tem = true  //设置一个变量，用来控制音乐是否在播放。//定义一个函数，当用户单击的时候触发这个函数，从而实现音乐的暂停与播放。
function musiccc(){//tem用来控制音乐当前是否在播放。true代表音乐正在播放，false代表音乐当前正在处于暂停的状态。if(tem == false){music.play()  //播放音乐tem = true  document.getElementById('musicico').style.animationPlayState = 'running'  //播放音乐图标}else{music.pause()  //暂停音乐tem = falsedocument.getElementById('musicico').style.animationPlayState = 'paused'  //暂停音乐图标}
}

3、创建一个.css页面，用来实现动画旋转的功能。

/* 音乐播放和暂停 */
img#musicico{animation-name: music; //这个名称是下方的动画名称animation-timing-function: linear;  //linear代表均速旋转animation-duration: 3s;  //3秒旋转完一圈animation-iteration-count: infinite; //旋转无数次
}/* 实现动画的旋转 */
@keyframes music{0%{transform: rotate(0deg);}50%{transform: rotate(180deg);}100%{transform: rotate(365deg);}
}

到这里就完成了，让我们看一下效果吧。
由于.gif动画播放没有声音，所以效果图上的体验不是很好。
但是我们想要的效果是实现了。

刚看没用，快快打开你的开发软件练习起来吧。

单击音乐图标，实现音乐的暂停与播放。相关推荐

【CSS3】---- 纯 css 控制 html5旋转音乐图标，控制背景音乐
1. 效果展示 2. 效果分析开始音乐图标就360度自动无限旋转: 点击图标停止旋转,再次点击继续无限旋转. 3. 实现思路 1. 实现360°旋转 animation-timing-functio ...
网页音乐最小化后自动暂停_当其他声音开始播放时，如何自动暂停音乐
网页音乐最小化后自动暂停 You're listening to music, but then you click a video. Now both things are playing at ...
Android 10 手机端控制车载蓝牙音乐上一首、暂停、下一首、获取音乐信息等流程
需求:手机端音乐暂停和播放状态从服务端告诉客户端.设备端实现暂停.播放.上一首.下一首等功能代码路径: packages/apps/Bluetooth/src/com/android/bluetoo ...
ubuntu18.10安装网易云音乐，并解决网易云音乐图标无法启动的问题
ubuntu18.10安装网易云音乐,并解决网易云音乐图标无法启动的问题 ubuntu18.10安装网易云音乐解决网易云音乐图标无法启动的问题 ubuntu18.10安装网易云音乐网易云音乐官网下 ...
【技法操作】PS制作音乐图标，UI设计教程
今天教大家制作UI音乐图标. 所用软件为:PSCC2018版本,还没有这个软件的小伙伴们可以给我留言! 喜欢的小伙伴记得关注噢!
uni-app 点击图标控制音乐播放
uni-app官方链接:https://uniapp.dcloud.io/api/media/audio-context?id=createinneraudiocontext <template ...
在notification显示音乐图标，设置图标背景的方法
1.在notification显示音乐图标代码如下: RemoteViews views = new RemoteViews(getPackageName(), R.layout.statusbar ...
用布尔运算去做icon音乐图标
首先给看一下图片: 点击进去PS,随便新建图层,然后开始制作. 先画一个圆角矩形,圆角矩形的角度为140°,颜色数字为:e65c5c, 画好了以后,开始做里面的音乐图标,首先画一个小椭圆,椭圆的大小为 ...
vue3+ts 实现图标控制音乐播放
vue3+ts 实现图标控制音乐播放效果图代码避雷前言: 最近负责一个展示型项目需要背景音乐且可以控制播放效果图代码 <template><div class=&q ...

单击音乐图标，实现音乐的暂停与播放。

单击音乐图标，实现音乐的暂停与播放。相关推荐

最新文章

热门文章