ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-04-16 01:04:18  阅读:188  来源: 互联网

标签:背景音乐 width color JS 头像 music 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 = '点击开启背景音乐';
}

点击特效部分

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

暂时完工

后续 想起什么 学会点新东西再加
成品展示 以后慢慢 更新

标签:背景音乐,width,color,JS,头像,music,audio
来源: https://www.cnblogs.com/reashal/p/16151669.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有