JS事件笔记：音乐播放器

其他 2020-04-18 13:10:48 阅读次数: 0

运用JavaScript制作一个网页音乐播放器。

静态图片：
在这里插入图片描述

HTML文件：

<body>
<!-- 音频 -->
<div id="musicplayer">
    <audio  id="music" src="#"></audio>
</div>
<!-- 音频 end -->

<!-- 播放器界面 -->
<div class="player_bg">
    <div class="cover">
        <div class="opc"></div>
        <div class="musImg">
            <img id="image" src="#" alt="">
        </div>
        <div class="musName" id="mName"></div>
        <div class="playerNmae" id="pName"></div>

    </div>
    <div class="jindutiao" id="musBar">
        <div class="jindu" id="musJD">
            <div class="jinduyuan"></div>
        </div>
        <div class="time">
            <span class="beginTIme" id="bTime">00:00</span>
            <span class="endTIme" id="eTime">00:00</span>
        </div>
    </div>
    <div class="control">
        <div class="replay" id="replay">
            <span class="iconfont icon-replay"></span>
        </div>
        <select id="chagrSp" class="chagrSp">
            <option value="0.5">0.5</option>
            <option value="1.0" selected>1.0</option>
            <option value="1.5">1.5</option>
            <option value="2.0">2.0</option>
        </select>
        <div class="change">
            <div class="prev cotrBtn" id="prev"><span class="iconfont icon-shangyishou"></span></div>
            <div class="play cotrBtn" id="play"><span class="iconfont icon-play"></span></div>
            <div class="next cotrBtn" id="next"><span class="iconfont icon-xiayishou"></span></div>
        </div>
        <div class="cotrVolBtn" id="cotrVolBtn">
            <span class="iconfont icon-yinliang"></span>
        </div>
        <div class="volCotr" id="musVol">
            <div class="handle" id="handle">
                <div class="yuan"></div>
            </div>
        </div>
        <div class="volV" id="volV">100%</div>
    </div>
</div>
<!-- 播放器界面 end -->
</body>

公共样式：

*{
    margin: auto;
    padding: 0;
}
ul,li,ol{
    list-style: none;
}
img{
    border:none;
}
a{
    list-style: none;
    text-decoration: none;
    color: #fff;
}
body{
    font-size: 14px;
    font-family: "Microsoft Yahei","Arial";
    color: #fff;
    background-color: #3f3d7e;
}

页面样式：

.player_bg{
    width: 600px;
    height: 400px;
    /*background-color: #a6c4ff;*/
    margin-top: 100px;
    overflow: hidden;
    position: relative;
}
.cover{
    width: 400px;
    height: 300px;
    border-radius: 20px 20px 0 0;
    background-image: url("../images/musicBG0.jpg");
    background-size: cover;
    animation: beginAni 1.5s both;
    z-index: -1;
    overflow: hidden;
    position: relative;
}
.musImg{
    width: 200px;
    height: 200px;
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 30px #fff;
    animation: imgAniBg 0.5s 1.5s both;
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -100px;
}
.musImg>img{
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
.musName,
.playerNmae{
    width: 100%;
    text-align: center;
    text-shadow: 0 0 8px rgba(255,255,255,255);
    position: absolute;
}
.musName{
    font-size: 16px;
    bottom: 25px;
    animation: txetAniLeft 0.5s 1.2s both;
}
.playerNmae{
    font-size: 14px;
    bottom: 10px;
    animation: txetAniRight 0.5s 1.4s both;
}
.opc{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #9a6e3a;
    opacity: 0.3;
}
.jindutiao{
    width: 600px;
    height: 5px;
    background-color: #9c64ab;
}
.jindu{
    margin: 0;
    width: 30%;
    height: 5px;
    background-color:  #ffd7e8;
    position: relative;
    z-index: 1;
}
.jinduyuan{
    width: 10px;
    height: 10px;
    border-radius:  50%;
    background-color:  #ffd7e8;
    position: absolute;
    right: -5px;
    top: 50%;
    margin-top: -5px;
    box-shadow: 0 0 14px #ffd0ea;
}
.jinduyuan:hover{
    width: 12px;
    height: 12px;
    position: absolute;
    right: -6px;
    top: 50%;
    margin-top: -6px;
}
.time{
    width: 100%;
    font-size: 10px;
    position: relative;
    z-index: 1;
}
.beginTIme{
    position: absolute;
    top: 5px;
    left: 10px;
}
.endTIme{
    position: absolute;
    top: 5px;
    right:10px;
}
.control{
    bottom: 0;
    width: 100%;
    height: 95px;
    background:linear-gradient(0deg, #7d53c7,#ab93c9);
    border-radius:0 0 20px 20px;
    z-index: 0;
    position: relative;
}
.replay>span{
    font-size: 18px;
}
.replay{
    position: absolute;
    top: 50%;
    left: 75px;
    margin-top: -9px;
}
.chagrSp{
    border-radius: 10px;
    width: 45px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 110px;
    margin-top: -10px;
    outline: none;
}
.change{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -24.5px 0 0  -110px;
    width: 220px;
    height: 49px;
    display: flex;
    justify-content: space-between;
}
.cotrBtn{
    margin: 0;
    line-height: 45px;
    text-align: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid #fff;
}
.cotrBtn>span{
    font-size: 30px;
}
.cotrVolBtn>span{
    font-size: 18px;
}
.cotrVolBtn{
    position: absolute;
    top: 50%;
    right: 130px;
    margin-top: -9px;
    pointer-events: none;   /* 防止事件穿透子标签 */
}
.volCotr{
    position: absolute;
    right: 20px;
    bottom: 45px;
    width: 100px;
    height: 5px;
    background-color: #7b52c7;
    border-radius: 5px;
}
.handle{
    position: relative;
    width: 100%;
    height: 5px;
    background-color: #fff;
    margin: 0;
    border-radius: 5px;
    pointer-events: none;   /* 防止事件穿透子标签 */
}
.yuan{
    width: 10px;
    height: 10px;
    pointer-events: none;   /* 防止事件穿透子标签 */
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    right: 0;
    top: -2.5px;
}
.volV{
    position: absolute;
    right: 60px;
    top: 25px;
    font-size: 12px;
}
.cotrBtn>span:hover,
.jindutiao:hover,
.volCotr:hover,
.replay>span:hover,
.chagrSp:hover,
.cotrVolBtn>span:hover{
    cursor: pointer;
}
.yuan:hover{
    box-shadow: 0 0 12px #bf9fee;
}
.rotate{
    animation: roteAni 10s linear infinite;
}

/* 动画区 */
@keyframes roteAni {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes beginAni {
    0%{
        opacity: 0;
        transform: translateY(400px);
    }
    50%{
        opacity: 0.3;
        transform: translateY(0);
    }
    100%{
        opacity: 1;
    }
}
@keyframes imgAniBg {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes txetAniLeft {
    0%{
        opacity: 0;
        transform: translateX(-300px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes txetAniRight {
    0%{
        opacity: 0;
        transform: translateX(300px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

iconfont样式：

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1587133346896'); /* IE9 */
  src: url('iconfont.eot?t=1587133346896#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAWIAAsAAAAAC1gAAAU5AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEGAqIIIZTATYCJAMoCxYABCAFhG0HgRkbqglRlE9On+yLBJ5D3dxKZxMJSJ0jNEc0EEhfm1U9H8HXfui+u/scYJcoYBcF1HZ8VIUsCwNkgVRVla/xHR+21f/nc7r3m0yrmZhlQ0SOg8hM5Ac8AW8dk8o2VO0IN/Z/zoYgbITadienjkih3cvafKD0Q3vAGHA94gRy/sH+/vyx1IsozGffzqU6FmWRNB5NhxtQdONENuABTQi3mFfTkyoMyubXQRcT6K1Igh49vH32Zgq2VSBeaYm9Wcqn1HBD66xLDiziFydt+tybwE/783EHiytJlbFLXTy5r3tXl7KvauLTsZwsEIaLYHsYGbtAIf6Uxn4jfG0XoT//BaQXeuZoENIl8Tn48+jPzOeiL0e+nP6q/j9yKcuPxhaHOV58JKhVkmaqf3itTiFq1DYBxHf1jkuZRNRcEoiKy2CrOvto8GjAzoAVzl4EiODqCKLl6jSi41pteC5tvT5gAZgmDkD8wByPbGeWhKD25Ad/xD8wKCgwgdB48FdSKr288gV3d9EKMmyTywt1kgMhJyTYY0SvTnjyZOFjDumrzoq9wfvRI/yQ8ZJrsU3i4MwT4fEkKJYB9vY+JZngpYWXkUvdrA5bRR+O0Yp2wZfn9IJD8mZ5g2TDXmV6rVeBu6giMp1uIos3nMrgazAgF0Hf/fAj8+gT++QLL9h7/PqHD5nHj7knT/grjybCFO1gNGtw+HLmw35THleTzbz7LnuAk8URK99p8yeN1uxyx6V4E5DGk1FiTNmuTYGG7lJHFKo9o8R6OcGM/C5nYqXo0p0b/bTFoh05LWsJG5DYqrydqrnMLp7E8aUlVnxKSiw3WJBgHvwW0ikcV1JqwyfFhDK9GQmWZ6mAWimWouSJ20KOG8M4jdNqJw0Lyt3qCzEoN73qg1zsmJcOpXIF+HKImTcn/8YfojYrM6jcF3wjPyNzSr0AO5hRq7sCFO48JYvKKCcxGcWnV4XRW3t53hHKhh7nmdse5jAOS1aOVxpqtxwvfjnLqt3z3xczv63yV67f3F7Irfzv4nDSOYwq7HK579IFYQR+ToaGks+5WmuULu7tY0w0+pBDP3/tIYaInz/JPUTtP2tLc+h+9393Ygqfub7NU027u9jwMaOPBY9La/znwq2QmIbfLukuvxvs778G76TxMr/7vrSq/a1P4C7/ZOnCbBju8RbTNjlURamwtAXpGU2Je8DHcw5HeMoMmsICxh70jJRwh2PZUjflwlIqRZsFpgUWTb14/VlRAeP5HDGj1xvl14QAyHvpCiD/6ntA/tm3AK212bH0F2MAO3rxNrg/v7mn7YT/rfwNW/DvzMttNDcqMGy9lUDrP9l65LRyMTJ/X04Tk4YfUP3CkA+FR8/n8IlOzXk9tGMR3ZfQWoyQNJYha61iC3EXKoN9qLVOobdj9uGDeU2GonTYtphAmLEHkil/IZtxC1uIr6Cy5BfUZkJA73F4nnCwnsrF9ERYqIaiP6isOAgRLAvX/51k6zAljVb6TSnrIqSlpGabjxQoDbFLcycvW4qAssQeZpHLkXMMDYkNVWVXUUpzpOmysnfaFbPvLTyUEFSQGijyB1SqsEDo+YtF7vvfEanloFQz6ln1G0kyvXyQJkUqAvtoC6hRlzK0WUe61EIrAijb9mUemEUjxPEaAw3l6xmkUuxUdKg0jmg6WxnWtpve4R9t4x9mDPYCfaTIUaKKOppoo4s+Bu1rHZzGIKdVWmkSwyZN1Dj8G0F22aywQG16cTvv0Ogjmy68m6cJ8qRaPGPY1LThzH/cCpyjTQr+W/b2egAA') format('woff2'),
  url('iconfont.woff?t=1587133346896') format('woff'),
  url('iconfont.ttf?t=1587133346896') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1587133346896#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-yinliang:before {
  content: "\e662";
}

.icon-jingyin:before {
  content: "\e61d";
}

.icon-replay:before {
  content: "\e654";
}

.icon-play:before {
  content: "\e80f";
}

.icon-shangyishou:before {
  content: "\e603";
}

.icon-xiayishou:before {
  content: "\e602";
}

.icon-zanting_huaban:before {
  content: "\e637";
}

.icon-lunboyoufangun:before {
  content: "\e7b7";
}

.icon-lunbozuofangun:before {
  content: "\e7be";
}

javaScript:

{
    // 获取页面id
    let music = document.getElementById("music");
    let image = document.getElementById("image");
    let play = document.getElementById("play");
    let prev = document.getElementById("prev");
    let next = document.getElementById("next");
    let mName = document.getElementById("mName");
    let pName = document.getElementById("pName");
    let eTime = document.getElementById("eTime");
    let musJD = document.getElementById("musJD");
    let bTime = document.getElementById("bTime");
    let musBar = document.getElementById("musBar");
    let musVol = document.getElementById("musVol");
    let handle = document.getElementById("handle");
    let replay = document.getElementById("replay");
    let chagrSp = document.getElementById("chagrSp");
    let cotrVolBtn = document.getElementById("cotrVolBtn");
    let volV = document.getElementById("volV");

    let tupian = image.parentNode;


    // console.log(musVol.offsetWidth);
    // 音乐库
    let songs = [{
        name : "Bloom of Youth",
        singer:"清水準一",
        mp3:"music/1.mp3",
        img:"images/1.jpg"
    },
        {
            name : "Refrain",
            singer:"Anan Ryoko",
            mp3:"music/2.mp3",
            img:"images/2.jpg"
        },
        {
            name : "Summer's Here",
            singer:"Thomas Greenberg",
            mp3:"music/3.mp3",
            img:"images/3.jpg"
        },
        {
            name : "Sunny Jim",
            singer:"Deep East Music",
            mp3:"music/4.mp3",
            img:"images/4.jpg"
        },
        {
            name : "いのちの名前",
            singer:"広橋真紀子",
            mp3:"music/5.mp3",
            img:"images/5.jpg"
        }];

    // 定义函数
    let changeMus = function( index ){
        music.src = songs[index].mp3;
        image.src = songs[index].img;
        mName.innerHTML = songs[index].name;
        pName.innerHTML = songs[index].singer;
        musJD.style.width = 0;
    };
    let setVol = function( event ){
        let x = event.offsetX;
        let bfb = x / musVol.offsetWidth * 100;
        handle.style.width = bfb + "%";
        music.volume = bfb / 100;
        volV.innerHTML = Math.floor(bfb)+ "%";
        // console.log(volV.innerHTML);
        if( music.volume <= 0 ){
            music.muted = true;
            cotrVolBtn.innerHTML = "<span class='iconfont icon-jingyin'></span>";
        }else {
            music.muted= false;
            cotrVolBtn.innerHTML = "<span class='iconfont icon-yinliang'></span>";
        }
    };
    let musicSchl = function( evetn ){
        let x = event.offsetX;
        let bfb = x / musBar.offsetWidth * 100;
        musJD.style.width = bfb + "%";
        music.currentTime = music.duration * bfb / 100;
        play.innerHTML = "<span class='iconfont icon-zanting_huaban'></span>";
        image.classList.add("rotate");
    };

    // 事件集合
    let index = 0;
    // 默认第一首
    changeMus(index);
    // 给play添加点击事件
    play.addEventListener("click",function( event ){
        if( music.paused ){
            music.play();
            event.currentTarget.innerHTML = "<span class='iconfont icon-zanting_huaban'></span>";
            // let tupian = image.parentNode;
            image.classList.add("rotate");
            // tupian.style.animationDuration = music.duration;
        }else {
            music.pause();
            event.currentTarget.innerHTML = "<span class='iconfont icon-play'></span>";
            // let tupian = image.parentNode;
            image.classList.remove("rotate");
        }
    });
    // 切换歌曲
    prev.addEventListener("click", function ( event ) {
        index--;
        if( index <= -1 ){
            index = songs.length-1;
        }
        changeMus( index );
        play.innerHTML = "<span class='iconfont icon-zanting_huaban'></span>";
        image.classList.add("rotate");
        console.log( index );
    });
    next.addEventListener("click", function ( event ) {
        index++;
        if( index > songs.length-1 ){
            index = 0;
        }
        changeMus( index );
        play.innerHTML = "<span class='iconfont icon-zanting_huaban'></span>";
        image.classList.add("rotate");
        console.log( index );
    });

    // 歌曲事件

    // 元素据加载，显示总时长，duration
    music.addEventListener("loadedmetadata",function( event ){
        let end = music.duration;
        let m = Math.floor(end/60);
        let c = Math.floor(end%60);
        let ct = 0;
        let cti = 0;
        // console.log(m,c);
        if( c < 10 ){
            ct = "0"+c;
            eTime.innerHTML = "0"+m+":"+ct;
        }else if( c >= 10 ){
            cti = c ;
            eTime.innerHTML = "0"+m+":"+cti;
        }

    });
    //canplay 切换歌曲是，顺利播放
    music.addEventListener("canplay",function( event ){
        music.play();
    });

    // 时间更新
    music.addEventListener("timeupdate",function( event ){
        let jd = music.currentTime / music.duration;
        let bfb = jd*100 ;
        musJD.style.width = bfb + "%";
        let begin = music.currentTime;
        let m = Math.floor(begin/60);
        let c = Math.floor(begin%60);
        if(c<10){
            // console.log("0"+m,"0"+c);
            bTime.innerHTML = "0"+m+":"+0+c;
        }else if(c>=10){
            // console.log(m,c);
            bTime.innerHTML = "0"+m+":"+c;
        }
    });

    // 歌曲进度条
    musBar.addEventListener("click",function( event ){
        musicSchl( event );
    });

    // 音量控制
    musVol.addEventListener("click",function(){
        setVol(event);
    });
    musVol.addEventListener("mousedown",function( event ){
        musVol.addEventListener("mousemove",setVol);
    });
    musVol.addEventListener("mouseup",function( event ){
        musVol.removeEventListener("mousemove",setVol);
    });

    //重新播放事件
    replay.addEventListener("click",function( event ){
       music.currentTime = 0;
        play.innerHTML = "<span class='iconfont icon-zanting_huaban'></span>";
        image.classList.add("rotate");
    });

    // 切换播放速度
    chagrSp.addEventListener("change",function( event ){
        music.playbackRate = event.currentTarget.value;
    });
    // 静音事件
    cotrVolBtn.addEventListener("click",function( event ){
        if( !music.muted ){
            music.muted = true;
            event.currentTarget.innerHTML = "<span class='iconfont icon-jingyin'></span>";
        }else {
            music.muted= false;
            event.currentTarget.innerHTML = "<span class='iconfont icon-yinliang'></span>";

        }
    })
}
ResidualBridge
发布了13 篇原创文章 · 获赞 2 · 访问量 315
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_46410264/article/details/105596948
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022