外链论坛

 找回密码
 立即注册
搜索
查看: 25|回复: 5

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

[复制链接]

2952

主题

330

回帖

9919万

积分

论坛元老

Rank: 8Rank: 8

积分
99199392
发表于 2024-10-10 05:23:13 | 显示全部楼层 |阅读模式

欢迎点击「算法与编程之美」↑关注咱们

本文首发于微X公众号:"算法与编程之美",欢迎关注,即时认识更加多此系列文案

欢迎加入团队圈子!与作者面对面!直接点击!

新建文件目录

Hbuilder在新建一个目录,分别创建htmlcssjs文件。

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;">

       [ti:模特]

[ar:李荣浩]

[al:模特]

[00:02.51]模特 - 李荣浩

[00:07.56]词:周耀辉

[00:11.56]曲:李荣浩

[00:30.71]穿华丽的服装 为原始的巴望而站着

[00:38.04]用完美的表情 为脆弱的城市而撑着

[00:45.37]我冷漠的接受 你焦急的等待困着

[00:52.82]像无数存活在橱窗里的模特

[01:00.38]除了灯以外 我还能看见什么

[01:04.26]除了光以外 我还能需求什么

[01:07.96]除了你以外 还能倚赖哪一个

[01:15.18]在千里以外 在呼喊的是什么

[01:19.03]在百年以后想回忆的是什么

[01:22.77]在离开以前 能否再见那一刻

[01:28.47]记得 你的眼睛将会亮着

[01:33.79]我的手臂将会挥着

[01:37.53]谁说世界早已选取

[01:43.97]趁着我会喜怒你会哀乐

[01:48.53]唱几分钟情歌

[01:51.34]没什么 最少证明咱们还活着

[01:59.28]像单纯的蝴蝶 为玫瑰的甜美而飞着

[02:06.66]像顽皮的小猫 为明天的好奇而睡着

[02:14.05]是混乱的时代 是透明的监狱觉得

[02:21.38]是不可继续在橱窗里做模特

[02:29.24]除了风以外 我还能听到什么

[02:33.06]除了尘以外 我还能拒绝什么

[02:36.69]除了你以外 还能倚赖哪一个

[02:43.78]在千里以外 在呼喊的是什么

[02:47.64]在百年以后 想回忆的是什么

[02:51.36]在离开以前 能否再见那一刻

[02:57.00]记得 你的眼睛将会亮着

[03:02.42]我的手臂将会挥着

[03:06.01]谁说世界早已选取

[03:12.60]趁着我会喜怒你会哀乐

[03:17.08]唱几分钟情歌

[03:19.83]没什么 最少证明咱们还活着

[03:52.38]记得 你的眼睛将会亮着

[03:57.88]我的手臂将会挥着

[04:01.38]谁说世界早已选取

[04:08.03]趁着 我会喜怒你会哀乐

[04:12.53]唱几分钟情歌

[04:15.28]没什么最少证明咱们还活着

     </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:将动画绑定到divplay)上  */

     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规定动画完成一个周期所花费的秒或毫秒,默认值是0animation-timing-function规定动画的速度曲线,默认是"ease"animation-delay规定动画何时起始,默认是 0

引入JavaScript,使图标按钮动起来

var btn = document.getElementsByClassName("play")[0]//取音乐图标(按钮)

var myMusic = document.getElementById("myMusic")//取音乐播放器(播放器)

var txt = document.getElementById("txt")//取歌词

var con = document.getElementsByClassName("content")[0]

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[i].split("]")

     var time = arr[0].split(".")

var timer = time[0].split(":")//分隔音乐播放时表示的时刻:分和秒

    var ms = timer[0] * 60 + timer[1] * 1 //1分钟的时间

     var text = arr[1]

     if(text){//判断

html += "<p id=" + ms +">" + text + "</p>"

     }

     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[i].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 ++

         }

     }

})

效果图:

2

在我看来,该播放器制作的难点在于animation@keyframes的联合运用以及js代码的运用。本文参照网络视频完成,如有错误,还请指正。

END

实习主编   |   王楠岚

   责       编   |   江南沐雪

 where2go 团队

微X号:算法与编程之美          

长按识别二维码关注咱们!

温馨提示:点击页面右下角“写留言”发布评论,期待您的参与!期待您的转发!

回复

使用道具 举报

3004

主题

2万

回帖

9606万

积分

论坛元老

Rank: 8Rank: 8

积分
96066008
发表于 2024-10-17 09:27:00 | 显示全部楼层
你的言辞如同繁星闪烁,点亮了我心中的夜空。
回复

使用道具 举报

3003

主题

2万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139269
发表于 2024-10-18 20:33:47 | 显示全部楼层
软文发布论坛开幕式圆满成功。 http://www.fok120.com
回复

使用道具 举报

3074

主题

2万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99108805
发表于 2024-10-24 05:16:11 | 显示全部楼层
外贸论坛是我们的,责任是我们的,荣誉是我们的,成就是我们的,辉煌是我们的。
回复

使用道具 举报

2895

主题

2万

回帖

9997万

积分

论坛元老

Rank: 8Rank: 8

积分
99979615
发表于 2024-10-25 13:31:56 | 显示全部楼层
我完全赞同你的观点,思考很有深度。
回复

使用道具 举报

3016

主题

2万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139148
发表于 2024-10-30 15:01:11 | 显示全部楼层
i免费外链发布平台 http://www.fok120.com/
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-9 01:00 , Processed in 0.087090 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.