js简单开发的音乐播放器

08013 共计12815字，阅读大约43分钟

1.此项以js为基础，开发的一个简单的音乐播放器

（1）首先根据下面的文件创建一个文件夹

图片[1]-js简单开发的音乐播放器-智码星河

font_n0uns1dsb2里面是iconfont.css

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1724893016011') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-wode:before {
  content: "\e638";
}

.icon-tuijian:before {
  content: "\e606";
}

.icon-bofang:before {
  content: "\e543";
}

.icon-liebiao:before {
  content: "\ec6b";
}

.icon-shengyinkai:before {
  content: "\eca6";
}

.icon-shoucang:before {
  content: "\eca7";
}

.icon-sousuo:before {
  content: "\e640";
}

.icon-shangyishou_huaban:before {
  content: "\e636";
}

.icon-xiayishou_huaban:before {
  content: "\e637";
}

css里面是index.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.bigbox {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}
.bigbox header {
  height: 1.3333rem;
  flex: none;
}
.bigbox header .search1 {
  height: 1.0667rem;
  display: flex;
  align-items: center;
  width: 5.3333rem;
  border: 0.0267rem solid rgb(83, 210, 161);
}
.bigbox header .search1 .search {
  display: flex;
  align-items: center;
}
.bigbox header .search1 .search input {
  height: 100%;
  border: none;
}
.bigbox header .search1 .search .icon-sousuo {
  font-size: 0.7rem;
  color: rgb(83, 210, 161);
}
.bigbox header .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bigbox header .head .img {
  margin-left: 0.2667rem;
  margin-top: 0.2667rem;
  width: 1.2rem;
}
.bigbox header .head .img img {
  width: 1.2rem;
  border-radius: 50%;
  animation: move 3s infinite linear;
  animation-play-state: running;
}
.bigbox main {
  margin-top: 1.0667rem;
  overflow: auto;
  flex: 1;
}
.bigbox main .body .top {
  display: flex;
  justify-content: space-evenly;
}
.bigbox main .body .top .paihang {
  background-color: rgb(83, 210, 161);
}
.bigbox main .body .top div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 2.1333rem;
  background-color: rgb(96, 213, 125);
}
.bigbox main .list {
  text-align: center;
}
.bigbox main .list .lisi {
  margin: auto;
  background-color: #ddd;
  display: flex;
  justify-content: space-between;
  width: 80vw;
}
.bigbox main .list .lisi .font {
  font-size: 0.4rem;
}
.bigbox footer {
  display: flex;
  justify-content: space-around;
  height: 1.3333rem;
  flex: none;
}
.bigbox footer .fun {
  text-align: center;
}
.bigbox footer .fun .fon {
  font-size: 0.4rem;
}
.bigbox footer .fun .iconfont {
  color: rgb(83, 230, 198);
  font-size: 0.5333rem;
}

@keyframes move {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}/*# sourceMappingURL=index.css.map */

css文件另一个css是audio.css

.bigbox {
  height: 90vh;
}

.img {
  text-align: center;
  border-radius: 50%;
}
.img img {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  animation: move 3s linear infinite;
  animation-play-state: paused;
}

footer .footer {
  width: 90vw;
  display: flex;
  justify-content: space-between;
}
footer .footer .div {
  text-align: center;
}
footer .footer .iconfont {
  font-size: 0.5333rem;
}
footer .footer .bofang .iconfont {
  padding: 10px;
  font-size: 1.0667rem;
}

@keyframes move {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}/*# sourceMappingURL=audio.css.map */

img里面有张图

图片[2]-js简单开发的音乐播放器-智码星河

node_modules文件夹内容

图片[3]-js简单开发的音乐播放器-智码星河

amfe-flexible文件里创建一个index.js文件

index.js代码为

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

music中

图片[4]-js简单开发的音乐播放器-智码星河

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <script src="./node_modules/amfe-flexible/index.js"></script>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./font_n0uns1dsb2/iconfont.css">
    <title>Document</title>
</head>

<body>
    <div class="bigbox">
        <header>
            <div class="head">
                <div class="img"><img src="./img/sp240829_085219.png" ></div>
                <div class="search1">
                    <div class="search">
                        <input type="" name="" value="" placeholder="请输入内容...">
                        <span class="icon-sousuo iconfont"></span>
                    </div>
                </div>
                <div></div>
            </div>
        </header>
        <main>
            <div class="body">
                <div class="top">
                    <div class="gedan">歌单</div>
                    <div class="paihang">排行榜</div>
                </div>
                <div class="like">
                    <h4>猜你喜欢</h4>
                    <div class="list">




                    </div>
                </div>
            </div>
        </main>
        <footer>
            <div class="fun">
                <div class="iconfont icon-tuijian"></div>
                <div class="fon">推荐</div>
            </div>
            <div class="fun">
                <div class="iconfont icon-bofang"></div>
                <div class="fon">播放</div>
            </div>

            <div class="fun">
                <div class="iconfont icon-wode"></div>
                <div class="fon">我的</div>
            </div>
        </footer>
    </div>
</body>

</html>
<script>
    // 构建数据
    let arr = [
        {
            id: 1,
            name: "凤凰传奇-自由自在",
            path: "./audio.html?id=1"
        },
        {
            id: 2,
            name: "偏爱",
            path: "./audio.html?id=2"
        },
        {
            id: 3,
            name: "日不落",
            path: "./audio.html?id=3"
        },
        {
            id: 4,
            name: "盛夏的果实",
            path: "./audio.html?id=4"
        },
        {
            id: 5,
            name: "毛毛 - 奇迹再现",
            path: "./audio.html?id=5"
        },
        {
            id: 6,
            name: "挪威的森林",
            path: "./audio.html?id=6"
        },
    ]
    // 循环渲染页面
    document.querySelector('.list').innerHTML = arr.map(item => {
        return `
        <div class="lisi">
                            <div>
                                <div>
                                    <a class="font" href="${item.path}">${item.name}</a>
                                    <div class="font">year of fate</div>
                                </div>

                            </div>
                            <div><span class="icon-shengyinkai iconfont"></span></div>

                        </div>
        `
    }).join('')

    
    //点击我的隐藏主页
    document.querySelector('.icon-wode').addEventListener('click', function () {
        document.querySelector('.like').style.display = 'none'
    })
    //点击推荐隐藏主页
    document.querySelector('.icon-tuijian').addEventListener('click', function () {
        document.querySelector('.like').style.display = 'none'
    })
    //点击播放展示主页
    document.querySelector('.icon-bofang').addEventListener('click', function () {
        document.querySelector('.like').style.display = 'block'
    })
    // 推荐页左上角图标360度旋转（持续3分钟停掉）
    setInterval(function () {
        document.querySelector('img').style.animationPlayState = "paused";

    }, 180000)
</script>

audio.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <script src="./node_modules/amfe-flexible/index.js"></script>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/audio.css">
    
    <link rel="stylesheet" href="./font_n0uns1dsb2/iconfont.css">
    <title>Document</title>
</head>

<body>
    <div class="bigbox">
        <header>
            <div class="head" style="margin-top: .5333rem;">
                <div class="shou" style="margin-left: .5333rem;">收起</div>
                <div style="margin-right: .5333rem;">分享</div>
            </div>
        </header>
        <main>
            <div class="img">
                <div class="name" style="margin-bottom: .5333rem;">歌名</div>
                <div style="margin: auto; width: 5.3333rem; height: 5.3333rem; display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: black;">
                    <img src="./img/sp240829_085219.png" >
                </div>
                <audio src="" controls></audio>
            </div>
        </main>
        <footer>
            <div class="footer">
                <div class="div">
                    <div class="icon-shoucang iconfont"></div>
                    <div>收藏</div>
                </div>

                <div class="bofang">
                    <span class="iconfont icon-shangyishou_huaban"></span>
                    <span class="iconfont icon-bofang"></span>
                    <span class="iconfont icon-xiayishou_huaban"></span>
                </div>

                <div class="div">
                    <div class="iconfont icon-liebiao"></div>
                    <div>列表</div>
                </div>
            </div>
        </footer>
    </div>
</body>

</html>
<script>
    // 构建数据
    let arr = [
        {
            id: 1,
            name: "凤凰传奇-自由自在",
            path: "./audio.html?id=1"
        },
        {
            id: 2,
            name: "偏爱",
            path: "./audio.html?id=2"
        },
        {
            id: 3,
            name: "日不落",
            path: "./audio.html?id=3"
        },
        {
            id: 4,
            name: "盛夏的果实",
            path: "./audio.html?id=4"
        },
        {
            id: 5,
            name: "毛毛 - 奇迹再现",
            path: "./audio.html?id=5"
        },
        {
            id: 6,
            name: "挪威的森林",
            path: "./audio.html?id=6"
        },
    ]
    // 获取id
    let id = location.search.split('=')[1]
    // 获取音频标签
    let audio = document.querySelector('audio')
    // 查找id
    let item = arr.find(item => item.id == id)
    // 设置音频的路径
    audio.src = './music/' + item.name + ".mp3"
    // 设置歌名
    document.querySelector('.name').innerHTML = item.name

    document.querySelector('.icon-bofang').addEventListener('click', function () {
        // 如果音乐处于暂停状态
        if (audio.paused) {
            // 开始播放
            audio.play()
            // 图片开始旋转
            document.querySelector('img').style.animationPlayState = "running";
            
            
        } else {
            // 否则暂停播放
            audio.pause()
            // 图片停止旋转
            document.querySelector('img').style.animationPlayState = "paused";
            

        }
       
    })

    // 下一首
    document.querySelector('.icon-xiayishou_huaban').addEventListener('click', function () {
        // 点击下一曲图片停止旋转
        document.querySelector('img').style.animationPlayState = "paused";
        id++
        if (id > arr.length) {
            id = 1
        }
        // 查找id
        item = arr.find(item => item.id == id)
        // 设置音频的路径
        audio.src = './music/' + item.name + ".mp3"
        // 设置歌名
        document.querySelector('.name').innerHTML = item.name
    })
    // 上一首
    document.querySelector('.icon-shangyishou_huaban').addEventListener('click', function () {
        // 点击上一曲图片停止旋转
        document.querySelector('img').style.animationPlayState = "paused";
        id--
        if (id < 1) {
            id = arr.length
        }
        // 查找id
        item = arr.find(item => item.id == id)
        // 设置音频的路径
        audio.src = './music/' + item.name + ".mp3"
        // 设置歌名
        document.querySelector('.name').innerHTML = item.name
    })
    // 点击收起跳转到音乐列表页
    document.querySelector('.shou').addEventListener('click', function () {
        // 跳转页面
        location.href = './index.html'

    })
</script>

最终结果

图片[5]-js简单开发的音乐播放器-智码星河
图片[6]-js简单开发的音乐播放器-智码星河

本站代码模板仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！
文章版权声明 1 本网站名称： 智码星河
2 本站永久网址：https://wx234.cn
© 版权声明 文章版权归作者所有，未经允许请勿转载。

WX234.CN
JS项目案例前端教程
喜欢就支持一下吧
点赞13赞赏 分享打赏
青栀的头像-智码星河钻石会员
集成 GPT-4 的代码编辑器 Cursor-智码星河
集成 GPT-4 的代码编辑器 Cursor
集成 GPT-4 的代码编辑器 Cursor
1个月前 156
AI绘画 – 宁雨蝶-智码星河
AI绘画 – 宁雨蝶
AI绘画 – 宁雨蝶
2个月前 154
IDM2024破解版序列激活永久授权-智码星河
IDM2024破解版序列激活永久授权
IDM2024破解版序列激活永久授权
2个月前 115
GitHub Desktop v3.4.2.0汉化版-智码星河
GitHub Desktop v3.4.2.0汉化版
GitHub Desktop v3.4.2.0汉化版
2个月前 109
2024最新 Navicat Premium 17 简体中文版破解激活永久图文详细教程-智码星河
2024最新 Navicat Premium 17 简体中文版破解激活永久图文详细教程
2024最新 Navicat Premium 17 简体中文版破解激活永久图文详细教程
2个月前 98
文件搜索工具Everything v1.4.1.1026 正式版-智码星河
文件搜索工具Everything v1.4.1.1026 正式版
文件搜索工具Everything v1.4.1.1026 正式版
1个月前 90
相关推荐
js简单开发的音乐播放器-智码星河
js简单开发的音乐播放器
js简单开发的音乐播放器
1个月前 80
【jQuery动画】停止动画、淡入淡出、自定义动画-智码星河
【jQuery动画】停止动画、淡入淡出、自定义动画
【jQuery动画】停止动画、淡入淡出、自定义动画
50天前 76
web网页聊天室-智码星河
web网页聊天室
web网页聊天室
1个月前 71
一行css让页面平滑滚动-智码星河
一行css让页面平滑滚动
一行css让页面平滑滚动
1个月前 65
前端知识点总结（html+css）-智码星河
前端知识点总结（html+css）
前端知识点总结（html+css）
1个月前 62
15个前端小知识-智码星河
15个前端小知识
15个前端小知识
1个月前 61
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

夸夸
夸夸
还有吗！没看够！
取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片

    暂无评论内容

免费内容
获取下载地址
作者信息
免费领取大额流量卡
用户封面
青栀的头像-智码星河钻石会员
创建vue3（npm create vue@latest）
nvm的简介、安装、使用
js 鼠标事件总结
vue2知识点总结
解决vue路由重复点击报错
项目06——第三方组件库的使用
集成 GPT-4 的代码编辑器 Cursor-智码星河
156人已阅读
集成 GPT-4 的代码编辑器 Cursor
TOP1
AI绘画 – 宁雨蝶-智码星河
AI绘画 – 宁雨蝶
2个月前154人已阅读
TOP2
IDM2024破解版序列激活永久授权-智码星河
IDM2024破解版序列激活永久授权
2个月前115人已阅读
TOP3
GitHub Desktop v3.4.2.0汉化版-智码星河
GitHub Desktop v3.4.2.0汉化版
2个月前109人已阅读
TOP4
2024最新 Navicat Premium 17 简体中文版破解激活永久图文详细教程-智码星河
2024最新 Navicat Premium 17 简体中文版破解激活永久图文详细教程
2个月前98人已阅读
TOP5
文件搜索工具Everything v1.4.1.1026 正式版-智码星河
文件搜索工具Everything v1.4.1.1026 正式版
1个月前90人已阅读
TOP6