如何设计一个网页版音乐播放器

来源：互联网发布：js 修改style属性编辑：程序博客网时间：2024/06/02 03:38

样式预览:

music_player

主要功能:

音乐开始播放、暂停
音乐文件总时长、当前播放时长
进度的显示与调节
音量的显示与调节
音乐结束的判断

主要代码块（Js）：

进度条：（进度的调节及显示）

 var music = document.getElementById("music"); var btn = document.getElementById("play_pause_btn"); var current_time = document.getElementById("music_time"); var music_progress =   document.getElementById("music_progress");  var voice_progress = document.getElementById("voice");        music.volume = 0.5;//计时        function showTime() {            //返回音乐时长            var music_time = music.duration;            var now_time = music.currentTime;            var minutes = parseInt(music_time / 60);            var seconds = parseInt(music_time - minutes * 60);            minutes = minutes < 10 ? '0' + minutes : minutes;            seconds = seconds < 10 ? '0' + seconds : seconds;            //返回播放时长            var seconds_now = parseInt(now_time % 60);            var minutes_now = parseInt(now_time / 60);            seconds_now = seconds_now < 10 ? '0' + seconds_now : seconds_now;            minutes_now = minutes_now < 10 ? '0' + minutes_now : minutes_now;            //显示到文本中            current_time.innerHTML = minutes_now + ":" + seconds_now + "/" + minutes + ":" + seconds;            //显示到音乐进度条中            var plan = parseFloat(now_time / music_time);            var value1 = parseInt(plan * 100);            music_progress.value=value1;            if (music.ended) {                console.log("end");                music.currentTime = 0;                btn.style.transform = "rotate(0deg)";                clearInterval(timer2);            }        }

2.播放按钮：（音乐的播放与暂停）

var deg = 0;        var timer2;        //按钮开关        btn.onclick = function() {            if (music.paused) {                music.play();                timer2 = setInterval(function() {                    if (deg == 360) { deg = 0; }                    deg += 5;                    console.log(deg);                    btn.style.transform = "rotate(" + deg + "deg)"                }, 100);            } else {                music.pause();                clearInterval(timer2);                btn.style.transform = "rotate(" + deg + "deg)"            }        }

3.音量调节：（音量的大小调节及显示）

//音量调节  :        music_progress.onclick = function(event) {            var e = event ? event : window.event;            console.log(e.pageX);            var start = 100;            music.currentTime = (e.pageX - start) * music.duration / 400;        }        voice_progress.onclick = function(eevet) {            var e = event ? event : window.event;            var start = 600;            music.volume = (e.pageX - start) / 200;            this.value = music.volume * 100;            var voice_tb = document.getElementById("voice_tb");            voice_tb.innerHTML = "音量：" + this.value + "%";        }        //定时器  : 设置时间 / 结束停止计时 / 重新开始        var timer = setInterval(function() {            showTime();        }, 10);

以下是完整的HTML代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>网页多媒体</title>    <style>    /*        整体框架     */    div#controller {        width: 800px;        height: 80px;        position: relative;        font-family: "segoe script";        background-image: url(bg.png);        border-radius: 5px;    }    /*          点击暂停开始    */    a#play_pause_btn {        width: 64px;        height: 64px;        position: absolute;        left: 10px;        top: 8px;        display: inline-block;    }    a#play_pause_btn img {        border-radius: 50%;        width: 100%;        height: 100%;    }    /*      显示时间    */    span#music_time {        position: absolute;        right: 310px;        top: 10px;    }    span#music_name {        position: absolute;        left: 90px;        top: 10px;    }    /*      音乐进度   */    progress#music_progress {        width: 400px;        height: 3px;        -webkit-appearance: none;        position: absolute;        left: 90px;        top: 50px;    }    progress#music_progress::-webkit-progress-bar {        background-color: white;        border-radius: 5px;    }    progress#music_progress::-webkit-progress-value {        background-color: #3f55a7;        border-radius: 5px;    }    /*       音量调节大小  */    progress#voice {        width: 200px;        height: 5px;        -webkit-appearance: none;        position: absolute;        right: 10px;        top: 45px;    }    progress#voice::-webkit-progress-bar {        background-color: white;        border-radius: 5px;    }    progress#voice::-webkit-progress-value {        background-color:#e72568;        border-radius: 5px;    }    /*  音量按钮*/    span#voice_tb {        position: absolute;        right: 220px;        top: 40%;    }    </style>    <script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.min.js"></script>    <script>    window.onload = function() {        var music = document.getElementById("music");        var btn = document.getElementById("play_pause_btn");        var current_time = document.getElementById("music_time");        var music_progress = document.getElementById("music_progress");        var voice_progress = document.getElementById("voice");        music.volume = 0.5;        //计时        function showTime() {            //返回音乐时长            var music_time = music.duration;            var now_time = music.currentTime;            var minutes = parseInt(music_time / 60);            var seconds = parseInt(music_time - minutes * 60);            minutes = minutes < 10 ? '0' + minutes : minutes;            seconds = seconds < 10 ? '0' + seconds : seconds;            //返回播放时长            var seconds_now = parseInt(now_time % 60);            var minutes_now = parseInt(now_time / 60);            seconds_now = seconds_now < 10 ? '0' + seconds_now : seconds_now;            minutes_now = minutes_now < 10 ? '0' + minutes_now : minutes_now;            //显示到文本中            current_time.innerHTML = minutes_now + ":" + seconds_now + "/" + minutes + ":" + seconds;            //显示到音乐进度条中            var plan = parseFloat(now_time / music_time);            var value1 = parseInt(plan * 100);            music_progress.value=value1;            if (music.ended) {                console.log("end");                music.currentTime = 0;                btn.style.transform = "rotate(0deg)";                clearInterval(timer2);            }        }        var deg = 0;        var timer2;        //按钮开关        btn.onclick = function() {            if (music.paused) {                music.play();                timer2 = setInterval(function() {                    if (deg == 360) { deg = 0; }                    deg += 5;                    console.log(deg);                    btn.style.transform = "rotate(" + deg + "deg)"                }, 100);            } else {                music.pause();                clearInterval(timer2);                btn.style.transform = "rotate(" + deg + "deg)"            }        }        //音量调节  :        music_progress.onclick = function(event) {            var e = event ? event : window.event;            console.log(e.pageX);            var start = 100;            music.currentTime = (e.pageX - start) * music.duration / 400;        }        voice_progress.onclick = function(eevet) {            var e = event ? event : window.event;            var start = 600;            music.volume = (e.pageX - start) / 200;            this.value = music.volume * 100;            var voice_tb = document.getElementById("voice_tb");            voice_tb.innerHTML = "音量：" + this.value + "%";        }        //定时器  : 设置时间 / 结束停止计时 / 重新开始        var timer = setInterval(function() {            showTime();        }, 10);    }    </script></head><body>    <audio src="Beauty.mp3" id="music"></audio>    <div id="controller">        <div id="paly">        <a href="javascript:;" id="play_pause_btn">        <img src="tp.jpg" alt=""></a>        </div>        <div id="meg">        <span id="music_name">Beauty-Wold-Colony</span>        <span id="music_time"></span></div>        <div id="progresscontrol">            <progress id="music_progress" value="0" max="100"></progress>            <span id="voice_tb">音量:50%</span>            <progress id="voice" value="50" max="100"></progress>        </div>    </div></body></html>

阅读全文

0 0