zoukankan      html  css  js  c++  java
  • 纯js实现音乐播放的功能

    // JavaScript Document
    var music=document.getElementById("mymusic");
        var prograss=document.getElementById("prograss");
        var curtxt=document.getElementById("currenttime");
        var duration=document.getElementById("duration");
        var music_pic=document.getElementById("music_pic");
        var deg=0;//旋转角度
        var disctimer,prograsstimer;//碟片计时器,进度条计时器
        var musicindex=0;//音乐索引
        var musics=new Array("nicengshishaonian.mp3","huanian.mp3","chunfengshili.mp3");//音乐数组
        var music_pics=new Array("000002","000001","000001");
        
        
        //旋转碟片
        var disc=document.getElementsByClassName('disc');
            
            //音乐时间显示
            function curtime(txt,misic)
            {
                if(music.currentTime<10)
                    {
                        txt.innerHTML="0:0"+Math.floor(music.currentTime);
                    }else
                if(music.currentTime<60)
                    {
                        txt.innerHTML="0:"+Math.floor(music.currentTime);
                    }
                else
                    {
                        var minet=parseInt(music.currentTime/60);
                        var sec=music.currentTime-minet*60;
                        if(sec<10)
                            {
                                txt.innerHTML="0"+minet+":"+"0"+parseInt(sec);
                            }
                        else
                            {
                                txt.innerHTML="0"+minet+":"+parseInt(sec);
                            }
                    }
            }
            
            //播放暂停
            function playPause()
            {
                var btn=document.getElementById("playbtn");
                if(music.paused)
                    {
                        music.play();
                        clearInterval(disctimer);//清除碟片的定时器
                        btn.style.background="url(images/music/pictures/pause.png) no-repeat 10px";//改变播放暂停键的图标
                        disctimer=setInterval(function(){
                        disc[0].style.transform="rotate("+deg+"deg)";
                        deg+=5;
                            
                        //每秒设置进度条长度
                        },100);
                        prograsstimer=setInterval(function(){
                        prograss.style.width=(music.currentTime)*100 / (music.duration)+"%";
                        curtime(curtxt,music);
                        if(music.currentTime>=music.duration-1)//片尾跳转下一曲
                        {
                            musicindex++;//音乐索引加一
                            if(musicindex>=musics.length)//如果音乐索引超过长度,将音乐索引清零
                            {
                                musicindex=0;
                            }
                            getMusic();
                            music.play();//重载音乐后进行播放
                        }
                        },1000);
                    }
                else
                    {
                        music.pause();//停止音乐
                        btn.style.background="url(images/music/pictures/play.png) no-repeat 10px";
                        clearInterval(disctimer);//清除碟片滚动的定时器
                        clearInterval(prograsstimer);//清除进度条的定时器
                    }
            }
        
        //下一曲
        function nextMusic()
        {
            musicindex++;//音乐索引加一
            if(musicindex>=musics.length)//如果音乐索引超过长度,将音乐索引清零
                {
                    musicindex=0;
                }
            getMusic();
            music.play();
        }
        
        //上一曲
        function backMusic()
        {
            musicindex--;
            if(musicindex<0)//如果索引小于0,将索引变为最大值
                {
                    musicindex=musics.length-1;
                }
            getMusic();
            music.play();
        }
            
        //读取音乐
            function getMusic()
            {
                music.src="images/music/"+musics[musicindex];//改变音乐的SRC
                music_pic.src="images/music/pictures/"+music_pics[musicindex]+".jpg";
                if(music.readyState="complete")
                    {
                        setTimeout(function(){
                            duration.innerHTML=parseInt(music.duration/60)+":"+parseInt(music.duration%60);
                        },1000);//一秒后读取音乐的总时长
                        
                    }
            }
            
        
            window.onload=function(){
                getMusic();
                
            }
    View Code
  • 相关阅读:
    MFC TeeChart 用法整理二 (画二维图)
    CFileFind类的详解以及应用实例
    error C2065: 'AfxCriticalTerm' : undeclared identifier 解决办法
    error LNK2001
    ShellExecute详细用法(可以单独打开一个文件)
    java连接SQL Server数据库
    Java 异常处理
    eclipse 无法自动匹配
    Java简单的表格模型
    Java 字符串常用操作(String类)
  • 原文地址:https://www.cnblogs.com/ciscolee/p/12456226.html
Copyright © 2011-2022 走看看