前端|怎么样制作音乐播放器-外链论坛

lbk60ox 发表于 2024-10-10 05:23:13

前端|怎么样制作音乐播放器

欢迎点击「算法与编程之美」↑关注咱们！
本文首发于微X公众号："算法与编程之美"，欢迎关注，即时认识更加多此系列文案。
<a style="color: black;">欢迎加入团队圈子！与作者面对面！直接点击！</a>
新建文件目录
在Hbuilder在新建一个目录，分别创建html，css和js文件。
<img src="https://mmbiz.qpic.cn/mmbiz_png/ibvOwOgkd4UouibTXJzNmgNF5cZtXUCQOQ62eRXxAf1SibUQictCIzwGbQXKhJ3xRlHKhUCO95sEfuAvPS4bh08YxA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
图1
搭建音乐播放器框架
创建一个主容器class="photo"来为音乐播放器搭建背景框架。

     <article>
         <div>模特</div>  
         <div>李荣浩</div>
         <div></div>       
         <div>              
<div></div>
         </div>
     </article>
插进音乐播放器

在框架下方插进音乐播放器audio，其中，src暗示音频的位置，音频后面则表示当浏览器不支持audio时表示的内容。

     <audio id="myMusic" src="content/flac/李荣浩 -模特.mp3">
                 您的浏览器不支持音乐播放
     </audio>
创建歌词页面
用<textarea> 标签（多行的文本输入控件）来装载歌词。其中，cols属性暗示列数，rows属性暗示行数；而display: none暗示div隐匿，倘若是block，便是表示。

<textarea name="" id="txt" cols="30" rows="10"  style="display: none;">
       


模特 - 李荣浩
词：周耀辉
曲：李荣浩
穿华丽的服装为原始的巴望而站着
用完美的表情为脆弱的城市而撑着
我冷漠的接受你焦急的等待亦困着
像无数存活在橱窗里的模特
除了灯以外 我还能看见什么
除了光以外 我还能需求什么
除了你以外 还能倚赖哪一个
在千里以外 在呼喊的是什么
在百年以后想回忆的是什么
在离开以前 能否再见那一刻
记得 你的眼睛将会亮着
我的手臂将会挥着
谁说世界早已无选取
趁着我会喜怒你会哀乐
唱几分钟情歌
没什么 最少证明咱们还活着
像单纯的蝴蝶为玫瑰的甜美而飞着
像顽皮的小猫为明天的好奇而睡着
是混乱的时代是透明的监狱亦觉得
是不可继续在橱窗里做模特
除了风以外 我还能听到什么
除了尘以外 我还能拒绝什么
除了你以外 还能倚赖哪一个
在千里以外 在呼喊的是什么
在百年以后 想回忆的是什么
在离开以前 能否再见那一刻
记得 你的眼睛将会亮着
我的手臂将会挥着
谁说世界早已无选取
趁着我会喜怒你会哀乐
唱几分钟情歌
没什么 最少证明咱们还活着
记得 你的眼睛将会亮着
我的手臂将会挥着
谁说世界早已无选取
趁着 我会喜怒你会哀乐
唱几分钟情歌
没什么最少证明咱们还活着
     </textarea>
用CSS来美化界面
*{
     margin: 0;
     padding: 0;
}
.photo{    /*总体框架*/
     width: 320px;
     height: 600px;
bac公斤round: linear-gradient(180deg,#d6ddee,#f1a0a0)fixed;/*背景颜色：xxdeg(方向值):　用方向值指定渐变的方向*/
     margin: 50px auto;
     color: #2c546d;/*文字颜色*/
     border-radius: 5px;/*盒子边框四个角的弧度*/
box-shadow: 0 0 7px #ecd5ee;/*盒子外暗影体积和颜色*/
     overflow: hidden;
}
.title{    /*歌名*/
     margin-top: 5px;
     width: 100%;
     height: 70px;
     font-size: 32px;
     text-align: center;
     line-height: 70px;
}
.singer{   /*歌手*/
     width: 100%;
     height: 40px;
     font-size: 18px;
     text-align: center;
     line-height: 40px;
}
.play{   /*音乐播放器图标*/
     width: 152px;
     height: 163px;
bac公斤round-image: url("./content/img/yy1.png");
     bac公斤round-repeat: no-repeat;
     margin: 10px 85px;
}
.lrc{    /*歌词*/
     width: 100%;
     height: 220px;
     margin: 50px auto;
text-align: center;
     overflow: hidden;
}
.lrc p{
     line-height: 20px;
     font-size: 15px;
}
.content{
     position: relative;
}
.play.rotate{/*绑定动画*/
-webkit-animation: rot 5s linear infinite;/*webkit:浏览器；animation：将动画绑定到div（play）上  */
     animation: rot 5s linear infinite;
}
@keyframes rot{
     from{
         transform: rotate(0deg); /*deg:旋转方向*/
     }
to{
         transform: rotate(360deg);
     }
}
其中，@keyframes创建动画，后面跟动画名叫作，指定的变化时出现时运用％，或关键字"from"和"to"；animation属性掌控动画的外观，运用选取器绑定动画。animation属性多种多样，其中，animation-name规定@keyframes动画的名叫作；animation-duration规定动画完成一个周期所花费的秒或毫秒，默认值是0；animation-timing-function规定动画的速度曲线，默认是"ease"；animation-delay规定动画何时起始，默认是 0。
引入JavaScript，使图标按钮动起来
var btn = document.getElementsByClassName("play")//取音乐图标(按钮)
var myMusic = document.getElementById("myMusic")//取音乐播放器(播放器)
var txt = document.getElementById("txt")//取歌词
var con = document.getElementsByClassName("content")
var mark = true
btn.onclick = function(){ //按钮点击时执行
     if(mark){
this.className += " rotate"
         myMusic.play()//播放音乐
         mark = false
     }else{
         this.className = "play"
         myMusic.pause()//暂停音乐
         mark = true
     }
}
var lrc = txt.value
var lrcArr = lrc.split("[")//从哪里起始获取歌词
var html = ""
//从头起始获取歌词
for(var i=0; i < lrcArr.length ; i++){//歌词长度
     var arr = lrcArr.split("]")
     var time = arr.split(".")
var timer = time.split(":")//分隔音乐播放时表示的时刻：分和秒
    var ms = timer * 60 + timer * 1 //1分钟的时间
     var text = arr
     if(text){//判断
html += "" + text + ""
     }
     con.innerHTML = html
}
//动画
var num = 0
var oP = con.getElementsByTagName("p")//获取p标签
myMusic.addEventListener("timeupdate",function(){  //取得歌的时间
var curTime = parseInt(this.currentTime) //把当前时间取到，并转换为整数
     if(document.getElementById(curTime)){
         for(var i=0; i < oP.length ; i++){
oP.style.cssText = "font-size:  15px;"
         } //对歌词样式做处理
document.getElementById(curTime).style.cssText = "bac公斤round:  linear-gradient(-3deg,#eebd89 0%,#d13abd 100%);-webkit-bac公斤round-clip:  text;color: transparent;font-size: 20px;"//播放音乐时，字体颜色变换
         if(oP[ 7 + num].id == curTime){
            con.style.top = -20 * num + "px"
            num ++
         }
     }
})
效果图：
<img src="https://mmbiz.qpic.cn/mmbiz_png/ibvOwOgkd4UouibTXJzNmgNF5cZtXUCQOQHhDVR88aLpjqrBc7VHCIvTMpVA15s8GjUg2HJ8uOtaE3WSaZ3JgIEA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
图2
在我看来，该播放器制作的难点在于animation和@keyframes的联合运用以及js代码的运用。本文参照网络视频完成，如有错误，还请指正。END
实习主编   |   王楠岚
   责       编   |   江南沐雪
 where2go 团队
微X号：算法与编程之美          <img src="https://mmbiz.qpic.cn/mmbiz_jpg/ibvOwOgkd4UoEw5rZykXncKXpzeHicpicURwoykaSNiamf6FSOYacP70cXzbaYSJYLiamzfc8uauLgstJSrdVY713Kw/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
长按识别二维码关注咱们!
温馨提示：点击页面右下角“写留言”发布评论，期待您的参与！期待您的转发！

b1gc8v 发表于 2024-10-17 09:27:00

你的言辞如同繁星闪烁，点亮了我心中的夜空。

j8typz 发表于 2024-10-18 20:33:47

软文发布论坛开幕式圆满成功。 http://www.fok120.com

4zhvml8 发表于 2024-10-24 05:16:11

外贸论坛是我们的，责任是我们的，荣誉是我们的，成就是我们的，辉煌是我们的。

4lqedz 发表于 2024-10-25 13:31:56

我完全赞同你的观点，思考很有深度。

qzmjef 发表于 2024-10-30 15:01:11

i免费外链发布平台 http://www.fok120.com/

页: [1]

外链论坛's Archiver

前端|怎么样制作音乐播放器