评论资讯 [ 总 861 则 ]
·mark - 2024-9-7 23:56
·悄然 - 2024-9-2 21:52
·马黑 - 2024-9-2 20:57
·马黑 - 2024-9-1 23:17
·飞飞 - 2024-8-28 18:42
·马黑 - 2024-8-28 18:39
·马黑 - 2024-8-26 19:22
·马黑 - 2024-8-26 08:24
·飞飞 - 2024-8-20 08:51
·马黑 - 2024-8-19 23:56
·悄然 - 2024-9-2 21:52
·马黑 - 2024-9-2 20:57
·马黑 - 2024-9-1 23:17
·飞飞 - 2024-8-28 18:42
·马黑 - 2024-8-28 18:39
·马黑 - 2024-8-26 19:22
·马黑 - 2024-8-26 08:24
·飞飞 - 2024-8-20 08:51
·马黑 - 2024-8-19 23:56
友情链接
网站统计
小白也做音频播放控制器
照猫画虎,画出来的好歹也是猫科动物,是不是虎不重要,能看就行。小白做个音频播放器没有想象中的那么难。
首先,布置好自己的帖子,包含CSS和HTML两部分。
CSS负责规范帖子的样式。它至少要对两个帖子元素进行样式描述,还设计一个动画。假设 papa 是帖子父元素,mplayer 是播放器元素:
<style>
/* 帖子外框 */
#papa {
--state: paused; /* 关键帧动画运行变量值 :暂停 */
position: relative; /* 相对定位以约束绝对定位的子元素 */
width: 1024px; /* 宽度 */
height: 640px; /* 高度 */
left: calc(50% - 81px); /* 左边定位 :配合下一句令帖子居中显示 */
transform: translateX(-50%);
background: tan url('图片地址') no-repeat center/cover; /* 背景设计 */
}
/* 播放器 */
#mplayer {
position: absolute; /* 绝对定位方式 */
width: 120px; /* 宽度 */
height: 120px; /* 高度 */
left: 100px; /* 定位 :左边值 */
top: 100px; /* 定位 :右边值 */
background: olive; /* 背景色 */
cursor: pointer; /*鼠标指针样式 :手型 */
animation: spin 8s linear infinite; /* 运行动画 */
animation-play-state: var(--state); /* 动画运行状态 :通过变量接受JS控制 */
}
/* 关键帧动画 旋转360度 */
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
CSS方面,这就差不多了,当然实际做帖时还需要一些细节完善和新元素添加。下来是HTML部分。HTML具体将帖子布置出来,显示在浏览器中。我们可以使用 div 标签来布置我们的帖子,标签的id至关重要,要一一对应上面的CSS选择器名称:
<div id="papa">
<div id="mplayer"></div>
<audio src="https://music.163.com/song/media/outer/url?id=429261487.mp3" autoplay loop></audio>
</div>
这里音频控件也有了,这是最简单高效的 audio 标签用法,自动播放、循环播放都设置好了。
最后,要用JS来控制播放器的暂停与播放以及其他交互控制:
<script>
//函数 :根据audio播放与否控制关键帧动画的运行
let mState = () => {
aud.paused ? papa.style.setProperty('--state', 'paused') : papa.style.setProperty('--state', 'running');
};
//监听 mplayer 单击事件 :播放或暂停音乐
mplayer.addEventListener('click', () => {
aud.paused ? aud.play() : aud.pause();
});
//监听 aud 播放事件 :
aud.addEventListener('play', () => mState());
//监听 aud 暂停事件 :
aud.addEventListener('pause', () => mState());
</script>
这就可以啦。嗯,JS代码还可以写得更简洁一些,比如 mState 函数,我使用三元运算符来写,一行解决所有问题,但还是有所冗余,可以写成更简短的:
let mState = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
那我为什么写成长一点的呢?这是考虑将来可能还要控制其他独立于音乐控制的动画,比如流动边框什么的,若此,很容易改造函数:
let mState = () => {
aud.paused ? (papa.style.setProperty('--state', 'paused'), 其他控制语句) : (papa.style.setProperty('--state', 'running'), 其他控制语句);
};
JS是编程语言,不会没关系,能略微理解上面的代码就好,细心一点,就可以修改相关的内容。
下面是上述CSS、HTML和JS的代码汇总:
<style>
#papa {
--state: paused;
position: relative;
width: 1024px;
height: 640px;
left: calc(50% - 81px);
transform: translateX(-50%);
background: tan url('图片地址') no-repeat center/cover;
}
#mplayer {
position: absolute;
width: 120px;
height: 120px;
left: 100px;
top: 100px;
background: olive;
cursor: pointer;
animation: spin 8s linear infinite;
animation-play-state: var(--state);
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
<div id="papa">
<div id="mplayer"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=429261487.mp3" autoplay loop></audio>
</div>
<script>
let mState = () => {
aud.paused ? papa.style.setProperty('--state', 'paused') : papa.style.setProperty('--state', 'running');
};
mplayer.addEventListener('click', () => {
aud.paused ? aud.play() : aud.pause();
});
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>
首先,布置好自己的帖子,包含CSS和HTML两部分。
CSS负责规范帖子的样式。它至少要对两个帖子元素进行样式描述,还设计一个动画。假设 papa 是帖子父元素,mplayer 是播放器元素:
<style>
/* 帖子外框 */
#papa {
--state: paused; /* 关键帧动画运行变量值 :暂停 */
position: relative; /* 相对定位以约束绝对定位的子元素 */
width: 1024px; /* 宽度 */
height: 640px; /* 高度 */
left: calc(50% - 81px); /* 左边定位 :配合下一句令帖子居中显示 */
transform: translateX(-50%);
background: tan url('图片地址') no-repeat center/cover; /* 背景设计 */
}
/* 播放器 */
#mplayer {
position: absolute; /* 绝对定位方式 */
width: 120px; /* 宽度 */
height: 120px; /* 高度 */
left: 100px; /* 定位 :左边值 */
top: 100px; /* 定位 :右边值 */
background: olive; /* 背景色 */
cursor: pointer; /*鼠标指针样式 :手型 */
animation: spin 8s linear infinite; /* 运行动画 */
animation-play-state: var(--state); /* 动画运行状态 :通过变量接受JS控制 */
}
/* 关键帧动画 旋转360度 */
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
CSS方面,这就差不多了,当然实际做帖时还需要一些细节完善和新元素添加。下来是HTML部分。HTML具体将帖子布置出来,显示在浏览器中。我们可以使用 div 标签来布置我们的帖子,标签的id至关重要,要一一对应上面的CSS选择器名称:
<div id="papa">
<div id="mplayer"></div>
<audio src="https://music.163.com/song/media/outer/url?id=429261487.mp3" autoplay loop></audio>
</div>
这里音频控件也有了,这是最简单高效的 audio 标签用法,自动播放、循环播放都设置好了。
最后,要用JS来控制播放器的暂停与播放以及其他交互控制:
<script>
//函数 :根据audio播放与否控制关键帧动画的运行
let mState = () => {
aud.paused ? papa.style.setProperty('--state', 'paused') : papa.style.setProperty('--state', 'running');
};
//监听 mplayer 单击事件 :播放或暂停音乐
mplayer.addEventListener('click', () => {
aud.paused ? aud.play() : aud.pause();
});
//监听 aud 播放事件 :
aud.addEventListener('play', () => mState());
//监听 aud 暂停事件 :
aud.addEventListener('pause', () => mState());
</script>
这就可以啦。嗯,JS代码还可以写得更简洁一些,比如 mState 函数,我使用三元运算符来写,一行解决所有问题,但还是有所冗余,可以写成更简短的:
let mState = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
那我为什么写成长一点的呢?这是考虑将来可能还要控制其他独立于音乐控制的动画,比如流动边框什么的,若此,很容易改造函数:
let mState = () => {
aud.paused ? (papa.style.setProperty('--state', 'paused'), 其他控制语句) : (papa.style.setProperty('--state', 'running'), 其他控制语句);
};
JS是编程语言,不会没关系,能略微理解上面的代码就好,细心一点,就可以修改相关的内容。
下面是上述CSS、HTML和JS的代码汇总:
<style>
#papa {
--state: paused;
position: relative;
width: 1024px;
height: 640px;
left: calc(50% - 81px);
transform: translateX(-50%);
background: tan url('图片地址') no-repeat center/cover;
}
#mplayer {
position: absolute;
width: 120px;
height: 120px;
left: 100px;
top: 100px;
background: olive;
cursor: pointer;
animation: spin 8s linear infinite;
animation-play-state: var(--state);
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
<div id="papa">
<div id="mplayer"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=429261487.mp3" autoplay loop></audio>
</div>
<script>
let mState = () => {
aud.paused ? papa.style.setProperty('--state', 'paused') : papa.style.setProperty('--state', 'running');
};
mplayer.addEventListener('click', () => {
aud.paused ? aud.play() : aud.pause();
});
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>
发表评论:
评论列表 [0条]