完成音乐播放器的自建，发现js出问题无法解决

最新推荐文章于 2024-01-25 12:30:01 发布

无用的忙碌

最新推荐文章于 2024-01-25 12:30:01 发布

阅读量262

点赞数

分类专栏： js css html 文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_46061526/article/details/105557615

版权

js 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        DOM事件练习
    </title>
</head>  
<body>
	<audio id="myMusic"  controls></audio>
	<div class="music">
        <div class="pic_div" >
            <img src="images/a_1.gif" alt="选择图" class="disc">
            <span class="dot"></span>
            <div class="music_proGrass">
                <div id="proGrass"></div>
            </div>
            <div class="time">
                <p>
                    <span id="currentTime">00:00</span>
                    <span>/</span>
                    <span id="duration"></span>
                </p>
            </div>
            <div class="music_menu">
                <span onClick="backMusic()"></span>
                <span onClick="playPause()" id="playBtn"></span>
                <span onClick="nextMusic()"></span>
            </div>
        </div>
    </div>
</body>
</html>
以上为html主题部分，验证后无问题

```css
 .music{
            width:500px;
            height:250px;
            background:#3b3b3b url(images/1-1F510151015W9.jpg) no-repeat;
            background-size:100% 100%;
        }
        .pic_div{
            position:relative;
        }
        .dot{
            width:15px;
            height:15px;
            background-color:#676767;
            border:1px solid #fff;
            border-radius:50%;
            position:absolute;
            top:110px;
            left:235px;
        }
        .disc{
            width:50px;
            position:absolute;
            left:230px;
            top:62px;
            transform:rotate(30deg);
        }
        .music_proGrass{
            width:480px;
            height:10px;
            background-color:#aea9a6;
            border:1px solid #3b3b3b;
            border-radius:10px;
            position:relative;
            top:185px;
            left:10px;
        }
        .music_proGrass div{
            width:0;
            height:100%;
            background-color:#ff0000;
        }
        .time {
            width:200px;
            height:20px;
            position:relative;
            top:170px;
            left:150px;
        }
        .time p{
            padding-left:40px;
        }
        .time p span:nth-child(2){
            padding:0 5px;
        }
        .music_menu{
            width:300px;
            height:20px;
           /* background-color:#ff0000;*/
            position:relative;
            top:170px;
            left:100px;
        }
        .music_menu span{
            width:30px;
            height:25px;
            display:inline-block;
            cursor:pointer;
        }
        .music_menu span:nth-child(1){
            margin:0 37px;
            background:url(images/后退.png) no-repeat 7px;
            background-size:100% 90%;
        }
        .music_menu span:nth-child(2){
            margin:0 15px;
            background:url(images/开始.jpg) no-repeat 7px;
            background-size:90% 90%;
        }
        .music_menu span:nth-child(3){
            margin:0 28px;
            background:url(images/前进.jpeg) no-repeat 7px;
            background-size:90% 90%;
        }

以上为css样式部分，验证后也无问题

 window.onload=function(){
         var music = document.getElementById('myMusic');
         var musics = new Array('星辰大海.mp3','风景.mp3','闷.mp3');
         var duration = document.getElementById('duration');
         var musicIndex = 0;//音乐索引
         var deg = 0;//旋转角度
         var btn = document.getElementById('playBtn');
         var discTimer,proGrassTimer;//碟片计时器，进度条计时器
         var disc = document.getElementsByClassName('disc');//旋转碟片
         var curTxt = document.getElementById('currentTime');


         //播放的音乐时长的显示
         function curTime(txt,music){
             if(music.currentTime < 10){
                 txt.innerHTML = '0:0' + Math.floor(music.currentTime);
             }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(){
             if(music.paused){
                 music.play();
                 clearInterval(discTimer);//清除碟片的计时
                 btn.style.background = 'url(images/暂停.jpg) no-repeat 10px';//改变播放暂停按钮的图片，此时歌曲播放状态，图片变为暂停图片
                 discTimer = setInterval(function(){
                     disc[0].style.transform = 'rotate(' + deg + 'deg)';
                     deg+=5;
                 },100);//设置每秒旋转角度
                 proGrassTimer = setInterval(function(){
                     proGrassTimer.style.width = (music.currentTime)*100 / (music.duration) + '%';//无法理解处
                     curTime(curTxt,music);
                     if(music.currentTime >= music.duration - 1){//当音乐时长大于等于总时长的倒数1秒时
                         musicIndex++;//音乐索引加一，跳转到下一首
                         if(musicIndex >= musics.length){//当音乐索引大于等于音乐数组的长度时，索引归0
                             musicIndex = 0;
                         }
                         getMusic();
                         music.play();
                     }//重载音乐后播放
                 },1000);
             }
             else{
                 music.pause();
                 btn.style.background = 'url(images/开始.jpg) 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){
                 musicIndex = musics.length-1;
             }
             getMusic();
             music.play();
         }
         //加载本地音乐
         function getMusic(){
            music.src = 'music/' + musics[musicIndex];//改变音乐的SRC
            //读取对应的音乐时长
            if(music.readyState = 'complete'){
                setTimeout(function(){
                    duration.innerHTML = parseInt(music.duration/60) + ':' +parseInt(music.duration%60);
                },200);//一秒后读取音乐的总时长
            }
         }
         getMusic();
    };

以上为javascript部分，验证后，内容有些不理解，且无法运行。
问题1，(music.currentTime)*100 / (music.duration) + '%'这段代码中无法理解currentTime和duration是music的什么属性，网上查询也没查出意思。
问题2，函数playPause()和nextMusic()和backMusic()。这三个函数运行时会报错误：没有定义。

哪位大神能指导一下。