小白也做音频播放控制器

位置: 首页 > 马黑教程
[发布: 2023.3.2  作者: 水手  阅读: 194]
照猫画虎,画出来的好歹也是猫科动物,是不是虎不重要,能看就行。小白做个音频播放器没有想象中的那么难。


首先,布置好自己的帖子,包含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 :keyframes 和 animation

发表评论:

  
 

评论列表 [0条]

Copyright © 2014 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com