layui实现一个调用kugou api搜索歌曲带歌词播放效果代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：layui实现一个调用kugou api搜索歌曲带歌词播放效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>歌词</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="referrer" content="no-referrer" />

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

</head>
<style>
    *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
    .main{position:relative;width:100%;height:100%;}
    .main-layout,.main-title{position:absolute;left:50%;margin-left:-270px;width:460px;text-align:center}
    .main-layout{top:15%;height:374px;background:#f1f3f4}
    .main-title{top:15%;overflow:hidden;margin-top:-44px;height:44px}
    .song-name{display:inline-block;margin-left:-12px;height:inherit;line-height:44px}
    .main-panel{position:relative;clear:both;overflow:hidden;height:inherit}
    .loading{position:absolute;top:50%;left:50%;margin-top:-15px;margin-left:-15px;height:inherit}
    .bt-spinner{width:30px;height:30px;border:2px solid #ddd;border-radius:50%;background-color:transparent;border-top-color:#e4007e;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}
    .lrc-panel{position:absolute;width:448px;transition:top .5s}
    .lrc-panel p{overflow:hidden;width:100%;height:34px;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:34px;transform: scale(1)}
    .current-play{color:#e4007e;font-size:17px!important; transition: all 0.6s;}
    .scroll{position:absolute;top:0;right:0;width:8px;height:100%}
    .scroll-drag{position:relative;height:61px;border-radius:8px;background:#0c0c0c;cursor:pointer}
    .main-audio{text-align:center}
    .main-audio audio{outline:0}
    .main-search{height: 50px;background-color: rgb(22, 154, 243);cursor: pointer;}
    .search-btn{line-height: 50px;color: #fff}
    @keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}
        to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}
    }
</style>

<body>

    <div class="main">
        <div class="main-title">
            <h2 class="song-name"></h2>
        </div>
        <div class="main-layout">
            <div class="main-panel">
                <div class="loading" style="display: none;">
                    <div class="bt-spinner"></div>
                </div>
                <div class="lrc-panel">
                </div>
                <div class="scroll">
                    <div class="scroll-drag"></div>
                </div>
            </div>
            <div class="main-audio"></div>
            <div class="main-search">
                <h2 class="search-btn">搜索歌曲播放</h2>
            </div>
        </div>
    </div>

    <script>
        var userAgent = function(){ //检测浏览器
        let ua = navigator.userAgent.toLowerCase();
        return {
            isWebkit: /webkit|khtml/.test(ua),
            isOpera: ua.indexOf('opera') > -1,
            isFirefox: ua.indexOf('firefox') > -1,
            isIE6: ua.indexOf('msie 6') > -1,
            isIE7: ua.indexOf('msie 7') > -1,
            isIE8: ua.indexOf('msie 8') > -1,
            isIE9: ua.indexOf('msie 9') > -1
        }
    }
    var mw = (function () {
        let mousewheel = function(){}
        mousewheel.prototype.init=function(el, fn, capture){
            var type = (userAgent().isFirefox) ? "DOMMouseScroll" : "mousewheel";
            if(window.addEventListener){
                return function(){
                    el.addEventListener(type,fn,capture);
                }
            }else if(window.attachEvent){
                return function(){
                    el.attachEvent("on" + type, fn);
                }
            }
        }
        mousewheel.prototype.stopEvent=function(event) {
            if (event.stopPropagation) {
                event.stopPropagation();
            }else {
                event.cancelBubble = true;
            }
            if(event.preventDefault) {
                event.preventDefault();
            }else {
                event.returnValue = false;
            }
        }
        mousewheel.prototype.wheelevent=function(ele,fn){
            var ev,_this = this,delta = 0;
            _this.init(ele,function(e){
                ev = window.event || e;
                _this.stopEvent(ev);
                delta = ev.wheelDelta ? (ev.wheelDelta / 120) : (- ev.detail / 3);
                try{
                    fn(delta);
                }catch(er){
                    return;
                }
            },false)();
        }
        mousewheel.prototype.zoomIn=function(ele,fn){
            this.wheelevent(ele,function(value){
                if(value > 0){fn(value);return;}
            });
        }
        mousewheel.prototype.zoomOut=function(ele,fn){
            this.wheelevent(ele,function(value){
                if(value < 0){fn(value);return;}
            });
        }
       .........完整代码请登录后点击上方下载按钮下载查看