初踩坑JS加载与audio接口:点击头像开始/暂停背景音乐

背景

封楼期间难得空闲，也静不下心学习，空闲之余萌生了重做引导单页的想法。因为之前都是扒站(某大公司游戏官网)+小改，一来虽然很炫酷，但本人水平有限，仍有很大一部分JS无从下手，甚至是看不懂|-_-|；二来对方毕竟没有开源，无论道德还是法律都说不过去，所以……先从简单处写起，后续慢慢迭代吧！

大致布局:Flex

参见阮一峰Flex布局教程

头像部分

手残党，暂时没有用CSS或者JS绘制特效，因为之前做头像留着底图，所以偷个懒。

CSS：鼠标指针指向头像切换gif，移开切换png。

JS：音乐播放切换gif，暂停切换png。

背景音乐部分

audio接口参见 HTML audio基础API完全使用指南

我只循环播放了一首歌，所以隐藏audio主体美观一些，然后控制按钮交给头像。有需要多首歌的，可以看一下开源的APlayer

遇到的问题:JS加载阻塞,获取不到元素id

在实现头像处鼠标事件时，一直获取不到头像的id，但是控制台调试发现代码无误。原来由于JS的机制是单线程，所以先运行JS代码，再构建相关DOM，需要在外部引用JS时加上属性async,等构建完DOM再获取。

<script src="./js/reashal.js" async="async"></script>

代码部分

HTML部分

<!DOCTYPE html>

<html lang="chn">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport"

        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

    <title>你听|睿屿青衫</title>

    <meta name="author" content="reashal">

    <meta name="description" content="不惦来路,轻装且行">

    <link rel="stylesheet" href="./css/style.css">

    <link rel="shortcut icon" href="https://images.reashal.com/resources/avator/reashal.png">

    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

    <script src="https://images.reashal.com/resources/js/music.js" async="async"></script>

</head>

<body>

    <div class="box">

        <div class="about" id="bor">

            <img src="https://images.reashal.com/resources/avator/reashal.png" id="ava" title="点我有惊喜哦" alt="头像/音乐控件">

            <div id="reashal">

                <h2><b>睿屿青衫</h2>

                <p>不惦来路,轻装且行</p>

                <div class="fgx"></div>

                <div class="icon">

                    <ul id="ctr">

                        <li><a href="https://www.reashal.com/" title="Home" target="blank"><i

                                    class="fa fa-paper-plane fa-lg"></i></a></li>

                        <li><a href="https://www.reashal.com/index.php/cross.html" title="Mood" target="blank"><i

                                    class="fa fa-pencil fa-lg"></i></a></li>

                        <li><a href="http://wpa.qq.com/msgrd?v=3&uin=532266666&site=ivrpano.com&menu=yes" title="QQ"

                                target="blank"><i class="fa fa-qq fa-lg"></i></a></li>

                        <li><a href="mailto:88811@88.com" title="Mail" target="blank"><i

                                    class="fa fa-envelope fa-lg"></i></a>

                        </li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

    <div class="footer">

        <a target="_blank" href="https://beian.miit.gov.cn/">

            <p>鲁ICP备18004237号</p>

        </a>

    </div>

    <div>

        <!--鼠标点击泡泡特效-->

        <canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>

        <script type="text/javascript" src="https://images.reashal.com/resources/js/djtx.js"></script>

    </div>

    <div>

        <audio controls id="music" loop>

            <source src="https://images.reashal.com/resources/music/LettingGo.mp3" type="audio/mpeg">

        </audio>

    </div>

</body>

</html>

CSS部分

html,

body {

    height: 100%;

    width: 100%;

    margin: 0;

    padding: 0;

}

body {

    background-image: linear-gradient(to right, #ec6fa3, #2f4af2);

}

.box {

    position: fixed;

    height: 100%;

    width: 100%;

    /* box铺满屏幕,需要html和body取消边距 */

    display: flex;

    align-items: center;

    justify-content: center;

    /* 盒子内部水平垂直居中对齐 */

}

.about {

    width: 70%;

    max-width: 750px;

    background-color: rgba(219, 245, 245, 0.1);

    padding: 1%;

}

#ava {

    display: block;

    width: 100px;

    height: 100px;

    border: 2px solid #1eccef;

    margin: auto;

    margin-top: 3%;

    border-radius: 100px;

}

#ava:hover {

    content: url("https://images.reashal.com/resources/avator/dyAva.gif");

}

#reashal {

    color: rgb(255, 255, 255);

    text-align: center;

    margin: auto;

}

.fgx {

    height: 1px;

    background-color: white;

}

ul,

li {

    display: inline-block;

    list-style: none;

    padding: 1vh;

    margin: auto;

}

i:hover {

    color: #ec6fa3;

}

.footer {

    bottom: 3%;

    width: 100%;

    position: fixed;

    text-align: center;

}

a,

p {

    color: white;

    font-size: 16px;

    text-decoration: none;

}

#music {

    display: none;

}

JS部分

音乐部分

var x = document.getElementById('ava');

// 单击头像开始/暂停背景音乐

var music = document.getElementById('music');

x.onclick = function () {

  if (music.paused) {

    music.play();

  }

  else {

    music.pause();

  }

}

//播放音乐旋转头像

music.onplay = function () {

  x.src = 'https://images.reashal.com/resources/avator/dyAva.gif';

  x.title = '点击暂停背景音乐';

}

//暂停音乐停止旋转头像

music.onpause = function () {

  x.src = 'https://images.reashal.com/resources/avator/reashal.png';

  x.title = '点击开启背景音乐';

}

点击特效部分

不贴了，想要的自己从我这里下载，别人写的我也看不懂……

暂时完工

后续 想起什么学会点新东西再加

成品展示以后慢慢更新吧

初踩坑JS加载与audio接口:点击头像开始/暂停背景音乐

背景

大致布局:Flex

头像部分

背景音乐部分

遇到的问题:JS加载阻塞,获取不到元素id

代码部分

HTML部分

CSS部分

JS部分

音乐部分

点击特效部分

暂时完工

初踩坑JS加载与audio接口:点击头像开始/暂停背景音乐的相关教程结束。

相关推荐

.Net开发的音频分离桌面应用，可用于提取背景音乐

Android自定义控件实例，圆形头像（图库 + 裁剪+设置），上传头像显示为圆形，附源码

[实战]MVC5+EF6+MySql企业网盘实战(4)——上传头像

.Net开发的音频分离桌面应用，可用于提取背景音乐

python 全栈开发，Day86(上传文件,上传头像,CBV,python读写Excel,虚拟环境virtualenv)

Android头像上传功能的实现代码（获取头像加剪切）

canvas怎样实现自定义头像功能

django头像上传预览功能