javascript开发迷你音乐播放器

知识点:html/css布局思维,音频标签api运用,css3自定义动画,Js音乐播放控制,歌词同步等。

html代码:

    <textarea id="txt" style="display:none">
        [00:00.64]小幸运 - 谭嘉仪
        [00:02.15]词:徐世珍&吴辉福
        [00:03.70]曲:JerryC
        [00:04.14]编曲:JerryC
        [00:13.77]我听见雨滴落在青青草地
        [00:19.89]我听见远方下课钟声响起
        [00:25.74]可是我没有听见你的声音
        [00:30.74]认真 呼唤我姓名
        [00:37.92]爱上你的时候还不懂感情
        [00:44.12]离别了才觉得刻骨 铭心
        [00:50.09]为什么没有发现遇见了你
        [00:54.70]是生命最好的事情
        [01:00.30]也许当时忙着微笑和哭泣
        [01:06.36]忙着追逐天空中的流星
        [01:12.12]人理所当然的忘记
        [01:16.55]是谁风里雨里一直默默守护在原地
        [01:24.44]原来你是我最想留住的幸运
        [01:29.69]原来我们和爱情曾经靠得那么近
        [01:35.67]那为我对抗世界的决定
        [01:40.29]那陪我淋的雨
        [01:43.28]一幕幕都是你 一尘不染的真心
        [01:50.60]与你相遇 好幸运
        [01:53.96]可我已失去为你泪流满面的权利
        [01:59.98]但愿在我看不到的天际
        [02:04.63]你张开了双翼
        [02:07.68]遇见你的注定 她会有多幸运
        [02:27.28]青春是段跌跌撞撞的旅行
        [02:33.44]拥有着后知后觉的美丽
        [02:39.55]来不及感谢是你给我勇气
        [02:44.22]让我能做回我自己
        [02:49.72]也许当时忙着微笑和哭泣
        [02:55.55]忙着追逐天空中的流星
        [03:01.61]人理所当然的忘记
        [03:06.03]是谁风里雨里一直默默守护在原地
        [03:13.79]原来你是我最想留住的幸运
        [03:19.05]原来我们和爱情曾经靠得那么近
        [03:25.17]那为我对抗世界的决定
        [03:29.68]那陪我淋的雨
        [03:32.56]一幕幕都是你 一尘不染的真心
        [03:39.89]与你相遇 好幸运
        [03:43.40]可我已失去为你泪流满面的权利
        [03:49.32]但愿在我看不到的天际
        [03:53.97]你张开了双翼
        [03:56.98]遇见你的注定
        [04:00.47]Oh 她会有多幸运
        </textarea>
        <div class="photo">
            <div class="top"></div>
            <div class="title">小幸运</div>
            <div class="singer">谭嘉仪</div>
            <div class="play"></div>
            <div class="lrc">
                <div class="content"></div>
            </div>
        </div>
        <audio src="mp3/谭嘉仪-小幸运.mp3" id="myMusic"></audio>

css代码:

    <style type="text/css">
                *{
        margin:0;
        padding:0;
        }
        body{
            background: rgb(55, 76, 86);
        }
        .photo{
            width:320px;
            height:600px;
            margin:100px auto;
            background:#000;
            font-family:"微软雅黑";
            padding: 5px;
            background-color:#222;
            border-radius: 20px;
            box-shadow: 0 0 7px #fff;
            overflow: hidden;
        }
        .top{
            width:320px;
            height:23px;
            background:url("images/1.png") no-repeat;
        }
        .title{
            width:320px;
            height:30px;
            background:url("images/2.png") no-repeat;
            font-size:20px;
            color:#ccc;
            font-weight:bold;
            text-align:center;
            line-height:30px;
        }
        .play{
            width:190px;
            height:190px;
            background:url("images/3.png") no-repeat;
            margin:auto;
            border-radius:50%;
        }
        .singer{
            width:320px;
            font-size:14px;
            color:#ccc;
            text-align:center;
            line-height:40px;
        }
        .lrc{
            width:300px;
            height:285px;
            margin:20px auto;
            text-align:center;
            overflow:hidden;
            color:#ccc;
        }
        .lrc p{
            line-height:20px;
            font-size:12px;
        }
        .content{
            position:relative;
            left:0;
            top:0;
        }
        .play.rotate{
            -webkit-animation:rot 5s linear infinite;
            -moz-animation:rot 5s linear infinite;
            -ms-animation:rot 5s linear infinite;
            -o-animation:rot 5s linear infinite;
            animation:rot 5s linear infinite;
        }

        @keyframes rot{
            from{transform:rotate(0deg);}
            to{transform:rotate(360deg);}
        }

    </style>

javascript代码:

    <script type="text/javascript">
    //window.onload=function(){}页面加载后执行
    var btn = document.getElementsByClassName("play")[0];//通过class类名去获取元素 数组的形式储存  []
    var myMusic = document.getElementById("myMusic");//通过ID
    var txt = document.getElementById("txt");
    var con = document.getElementsByClassName("content")[0]

    var mark = true;//布尔值   true真  false假
    btn.onclick = function(){
        if (mark)//隐式转换  i > 1
        {
            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;//转化为秒钟
        //字符串类型乘以数字类型就会转化成为数字类型
        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 = "color:#ccc;font-size:12px;"//在播放下一句之前把所有的歌词样式还原
            }
            document.getElementById(curTime).style.cssText = "color:red;font-size:18px;"
            if (oP[7+num].id == curTime)
            {
                con.style.top = -20*num + "px";
                num ++;//依次加一
            }
        }

    });//监听

    </script>

有兴趣想学习web前端的可以来web前端qun“189394454”可以免费获取2018最新web前端学习资料。
关注公众号→‘学习web前端’开启你的web前端学习之路

原文地址:http://blog.51cto.com/13457136/2088544

时间: 2024-11-10 14:44:57

javascript开发迷你音乐播放器的相关文章

Flex4/Flash+BlazeDS+JAVA+MySql 开发在线音乐播放器实例

要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演示地址 传统网络程序的开发是基于页面的.服务器端数据传递的模式,把网络程序的表现层建立于HTML页面之上,而HTML是适合于文本的,传统的基于页面的系统已经渐渐不能满足网络浏览者的更高的.全方位的体验要求了.而富互联网应用(Rich Internet Applications,缩写为RIA)的出现就

迷你音乐播放器v1.0正式上线!

迷你音乐播放器V1.0正式上线! 功能: 1.随机播放切换开关 2.歌曲为服务器本地音乐 3.网上搜索功能暂不支持...看下图 简单戳戳感受一下吧.. 快来一起分享吧~~~GitHub(戳我)   原文地址:https://www.cnblogs.com/yadongliang/p/10336409.html

Android开发之音乐播放器的实现

Android音乐播放器 使用到Android的Actiivity和Service组件 播放音乐使用Service组件 操作按钮等使用Activity与用户交互 同时为了把服务所在进程变成服务进程,防止Activity销毁时依旧执行Service,需要使用Service启动的混合调用,即先使用startService(),然后使用bindService()方法. 原理:使用bindService()方法,启动service.在ServiceConnection的onServiceConnecte

Android MVC实现一个音乐播放器

MVCPlayer 我尝试在android上使用MVC模式来开发一个音乐播放器.GitHub地址:https://github.com/skyhacker2/MVCPlayer 什么是MVC 来自维基百科 控制器 Controller - 负责转发请求,对请求进行处理. 视图 View - 界面设计人员进行图形界面设计. 模型 Model - 程序员编写程序应有的功能(实现算法等等).数据库专家进行数据管理和数据库设计(可以实现具体的功能). 那么在android上,Activity就是Cont

Ubuntu 14.04 用户如何安装深度音乐播放器和百度音乐插件

播放本地音乐或者收听国外的音乐电台,Ubuntu 14.04 自带的音乐播放器 Rhythmbox 完全能够满足,但是如果你想有像酷狗那样的国内播放器就需要折腾一下,还好有深度音乐播放器,这是一款完全为中国人开发的音乐播放器,深度音乐播放器(Dmusic)+ 百度音乐插件=酷狗,但是如果是deepin系统用户就完全不需要折腾了.先截图一下: 安装方法 (注释:我的系统是Ubuntu 14.04 其他系统没有实验,所以不保证是否成功) 先安装深度音乐播放器,安装很方便,有PPA可用,不过安装之前需

SE Springer小组之《Spring音乐播放器》可行性研究报告三、四

3 对现有系统的分析 由于本次可行性分析主要是建立在团队自行实现一个音乐软件的目标上,并不是在一个现有系统的基础上开发改进的新系统.因此这里将分析一款市面上已经存在的音乐软件(以下称为W音乐),并为之后开发“Spring音乐播放器”提供一定的参考. 3.1处理流程和数据流程 说明现有系统的基本的处理流程和数据流程.此流程可用图表即流程图的形式表示,并加以叙述. 图2 基本处理流程图 用户启动M音乐后,可以选择在网络音乐库中查找歌曲并下载,也可以从本地音乐库中查找想听的歌曲,然后进行播放.本地音乐

HTML5之audio实战,网页音乐播放器开发

今天我们就基于 HTML5 audio  来,开发一个网页音乐播放器. 在HTML5 新特性中,audio .video 是我们比较关心的 新 元素,我们终于可以脱离 Flash ,来开发音频.视频播放器了,对于 一个HTML 新元素,无非就是 属性.事件 .方法等等,关于audio 的具体的属性.事件 .方法,请谷歌. 看我们的HTML代码: audio.html <!DOCTYPE html> <html> <head> <meta charset="

jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器

最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如何让你的网站占据优势,就要看你的功能和用户体验了.html5对video还是做了很多优惠的东西,我们使用起来很得心应手. 在过去 flash 是网页上最好的解决视频的方法,截至到目前还算是主流,像那些优酷之类的视频网站.虾米那样的在线音乐网站,仍然使用 flash 来提供播放服务.但是这种状况将会随

Xamarin.Android开发音乐播放器

最近.Net开源着实让C#火了一把,好久就听说Mono for Android一直没静下心来看,上周末找来看看,确实不错,前台界面axml编写跟Java安卓开发毫无区别,后台用C#其实很多windows下的方法都可以用,做一个安卓音乐播放器,主要实现音乐播放,上一曲下一曲,音乐播放列表,随机播放,扫描SD卡内所有音乐. 先show一组界面啊,话说有图有真相啊: 项目结构如图: Lrc是歌词处理方法 MusicService是安卓服务播放音乐,服务Broadcast,以及界面接收Receiver