博客

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

  • Post author:
  • Post category:其他




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



1、首先创建一个.html页面，并且引入音乐和图标，用来实现网页的显示。
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>单击音乐图标实现暂停与播放。</title>

    <!-- 音乐css样式 -->
    <link rel="stylesheet" type="text/css" href="./index.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="./index.js"></script>

</html>


2、在创建一个index.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 = false
        document.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动画播放没有声音小图标也没弄，效果体验不是很好。

背景播放


版权声明：本文为weixin_57957943原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。