音乐播放器-2

音乐播放器-2

目录

• 音乐播放器-2
• 目录
• 已下架
• 背景
• 环境
• 版权
• 1、安装依赖
• 2、新建组件
• 3、注册组件
• 4、提供音乐源文件
• 5、验证
• 关于我
• 最后

[toc]

已下架

危险

因次功能特别影响首页加载，所以下架次功能。（且音乐播放器功能之前已经实现了的） --2025年4月21日

背景

给你的 vitepress添加音乐播放器，让你的网站更加有活力。

环境

2025.4.19(已解决)

警告

次配置适用于Teek@1.0.2-2025.4.10版本（其它版本可自行测试）。

提示

自己开源的 《vitepress-theme-teek-one-public》网站模板。

此模板是在《Young Kbt blog》大佬开源项目《vitepress-theme-teek 》基础上修改为自己的风格而成，感谢大佬开发得主题，大佬威武。❤️❤️

版权

提示

本文是在 博主程序员皮蛋鸽鸽 💻网站：极客兔 - 笔记站》看到的 nav 导航栏音乐播放器。在基础上增加了自己实践过程的一些细节，转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢~

本次是在《Hyde Blog》大佬的《音乐播放器》文章基础上，增加了自己实践过程的一些细节，感谢大佬的文章。💖💖💖

1、安装依赖

警告

基于作者的 vue 组件用了 element-plus组件提示，所以需要安装 element-plus 组件，不需要可以跳过。

pnpm

pnpminstallelement-plus

npm

npminstallelement-plus--save

yarn

yarnaddelement-plus

2、新建组件

• 在docs\.vitepress\theme\components\创建如下文件

详细信息

MusicPlayer.vue

<scriptsetuplang="ts">import{onMounted,ref } from'vue'import{ElMessage } from'element-plus'import'element-plus/dist/index.css'importPauseMusicController from'./PauseMusicController.vue'importPlayingMusicController from'./PlayingMusicController.vue'constmusics=['成都-赵雷.mp3','我愿意-王菲.mp3','阴天快乐.mp3',]constcurrentMusic=ref('/music/成都-赵雷.mp3')constaudio=ref<HTMLAudioElement|null>()constisPlayed=ref(false)letrandom =ref(0)letmusic_palyer_timer =ref<ReturnType<typeofsetInterval>|null>()constplayMusic=() =>{isPlayed.value =!isPlayed.valueconstmusicName=currentMusic.value.split('/').pop()?.replace(/\.mp3$/,'') ??'未知歌曲'ElMessage({message:isPlayed.value ?`正在播放: ${musicName}`:`已暂停: ${musicName}`,type:isPlayed.value ?'success':'warning',duration:2000})console.log('播放状态:',isPlayed.value ?'播放':'不播放')if(isPlayed.value) {audio.value?.play()} else{audio.value?.pause()consthandleLoadError=() =>{ElMessage.error('音乐加载失败，请重试')}}}constgenerateRandom=() =>{lettmp:number=Math.floor(Math.random() *musics.length)while(tmp ===random.value) {tmp =Math.floor(Math.random() *musics.length)}returntmp}onMounted(() =>{random.value =generateRandom()console.log(`%c第${random.value + 1}首音乐.`,'color:green;font-weight:bolder;')currentMusic.value =`/music/${musics[random.value]}`music_palyer_timer.value =setInterval(function() {if(audio.value?.ended) {console.log('%c音乐结束,下一曲~','color:oranger;font-weight:bold;')random.value =generateRandom()console.log(`%c第${random.value}首音乐.`,'color:green;font-weight:bolder;')currentMusic.value =`/music/${musics[random.value]}`}},1000)})</script><template><divclass="playMusic-wrapper"><buttonclass="playMusic"@click="playMusic"><PlayingMusicControllerv-if="isPlayed"/><PauseMusicControllerv-else/><!-- <svg class="icon"aria-hidden="true"><use :xlink:href="`#icon-${isPlayed ? 'music' : 'play2'}`"></use></svg> --></button><audioref="audio"preload="auto":autoplay="isPlayed":src="currentMusic"style="display:none"controls></audio></div></template><stylescopedlang="scss">$PlayControler-width:20px;$PlayControler-height:20px;.playMusic-wrapper {display:flex;justify-content:center;align-items:center;width:36px;height:36px;margin:0 5px;.playMusic {width:$PlayControler-width;height:$PlayControler-width;border-radius:20%;font-size:1.3rem;line-height:1.3rem;svg {margin:0;padding:0;width:$PlayControler-width;height:$PlayControler-width;}}}</style>

PauseMusicController.vue

<scriptsetuplang="ts">import{onMounted,ref } from'vue'import{ElMessage } from'element-plus'import'element-plus/dist/index.css'importPauseMusicController from'./PauseMusicController.vue'importPlayingMusicController from'./PlayingMusicController.vue'constmusics=['周杰伦-搁浅.mp3','林俊杰-不潮不用花钱.mp3','林俊杰-可惜没如果.mp3','林俊杰-美人鱼.mp3','林俊杰-修炼爱情.mp3','周杰伦-安静.mp3','周杰伦-不能说的秘密.mp3','周杰伦-彩虹.mp3','周杰伦-断了的弦.mp3','周杰伦-搁浅.mp3','周杰伦-轨迹.mp3','周杰伦-回到过去.mp3','周杰伦-借口.mp3','周杰伦-晴天.mp3','周杰伦-退后.mp3',]constcurrentMusic=ref('/music/周杰伦-搁浅.mp3')constaudio=ref<HTMLAudioElement|null>()constisPlayed=ref(false)letrandom =ref(0)letmusic_palyer_timer =ref<ReturnType<typeofsetInterval>|null>()constplayMusic=() =>{isPlayed.value =!isPlayed.valueconstmusicName=currentMusic.value.split('/').pop()?.replace(/\.mp3$/,'') ??'未知歌曲'ElMessage({message:isPlayed.value ?`正在播放: ${musicName}`:`已暂停: ${musicName}`,type:isPlayed.value ?'success':'warning',duration:2000})console.log('播放状态:',isPlayed.value ?'播放':'不播放')if(isPlayed.value) {audio.value?.play()} else{audio.value?.pause()consthandleLoadError=() =>{ElMessage.error('音乐加载失败，请重试')}}}constgenerateRandom=() =>{lettmp:number=Math.floor(Math.random() *musics.length)while(tmp ===random.value) {tmp =Math.floor(Math.random() *musics.length)}returntmp}onMounted(() =>{random.value =generateRandom()console.log(`%c第${random.value + 1}首音乐.`,'color:green;font-weight:bolder;')currentMusic.value =`/music/${musics[random.value]}`music_palyer_timer.value =setInterval(function() {if(audio.value?.ended) {console.log('%c音乐结束,下一曲~','color:oranger;font-weight:bold;')random.value =generateRandom()console.log(`%c第${random.value}首音乐.`,'color:green;font-weight:bolder;')currentMusic.value =`/music/${musics[random.value]}`}},1000)})</script><template><divclass="playMusic-wrapper"><buttonclass="playMusic"@click="playMusic"><PlayingMusicControllerv-if="isPlayed"/><PauseMusicControllerv-else/><!-- <svg class="icon"aria-hidden="true"><use :xlink:href="`#icon-${isPlayed ? 'music' : 'play2'}`"></use></svg> --></button><audioref="audio"preload="auto":autoplay="isPlayed":src="currentMusic"style="display:none"controls></audio></div></template><stylescopedlang="scss">$PlayControler-width:20px;$PlayControler-height:20px;.playMusic-wrapper {display:flex;justify-content:center;align-items:center;width:36px;height:36px;margin:0 5px;.playMusic {width:$PlayControler-width;height:$PlayControler-width;border-radius:20%;font-size:1.3rem;line-height:1.3rem;svg {margin:0;padding:0;width:$PlayControler-width;height:$PlayControler-width;}}}</style>

PlayingMusicController.vue

<template><svgt="1706712309791"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http:p-id="1184"width="200"height="200"><pathd="M983.38 306.44l-442.628 81.458a17.454 17.454 0 0 0-14.302 17.162v375.822c-31.38-18.59-72.608-24.724-113.914-13.666-74.146 19.85-120.418 87.528-103.352 151.164s91.006 99.13 165.152 79.28c65.884-17.638 109.718-73.042 106.704-129.814h0.188V469.482l367.992-67.74v289.742c-31.38-18.59-72.61-24.724-113.914-13.666-74.146 19.85-120.418 87.528-103.352 151.164 17.066 63.636 91.006 99.13 165.152 79.28 64.794-17.348 108.296-71.218 106.852-126.998H1004l0.008-457.66c0.002-10.906-9.896-19.14-20.628-17.164z"fill="#707AFA"p-id="1185"></path><pathd="M474.336 977.676c-74.146 19.85-148.086-15.644-165.152-79.28a103.588 103.588 0 0 1-3.038-16.91c-1.166 12.202-0.254 24.62 3.038 36.894 17.066 63.636 91.006 99.13 165.152 79.28 65.884-17.638 109.718-73.042 106.704-129.814h0.188v-19.984h-0.188c3.014 56.774-40.82 112.176-106.704 129.814zM1004 761.28h-0.042c1.444 55.78-42.058 109.652-106.852 126.998-74.146 19.85-148.086-15.644-165.152-79.28a103.588 103.588 0 0 1-3.038-16.91c-1.166 12.202-0.254 24.62 3.038 36.894 17.066 63.636 91.006 99.13 165.152 79.28 64.794-17.348 108.296-71.218 106.852-126.998H1004l0.008-457.66v-0.006L1004 761.28z"fill="#6770E6"p-id="1186"></path><pathd="M487.55 167.318c-30.86-99.616-129.14-131.888-191.96-142.34-15.806-2.62-31.02-3.864-41.386-4.454a12.668 12.668 0 0 0-13.394 12.65v378.478c-31.38-18.59-72.61-24.726-113.916-13.668-74.146 19.85-120.418 87.528-103.352 151.164 17.066 63.636 91.006 99.13 165.152 79.28 65.884-17.638 109.716-73.042 106.704-129.814h0.192V150.392c35.96 2.658 84.72 19.644 130.94 79.312 67.62 87.246 154.7 51.036 154.7 51.036-39.7 0.002-75.24-53.872-93.68-113.422z"fill="#FF8354"p-id="1187"></path><pathd="M188.692 607.944c-74.146 19.85-148.086-15.644-165.152-79.28a103.55 103.55 0 0 1-3.008-16.66c-1.204 12.282-0.306 24.79 3.008 37.146 17.066 63.636 91.006 99.13 165.152 79.28 65.884-17.638 109.716-73.042 106.704-129.814h0.192v-20.486h-0.192c3.014 56.774-40.82 112.176-106.704 129.814z"fill="#E0734A"p-id="1188"></path><pathd="M126.894 437.954c41.306-11.058 82.536-4.924 113.916 13.668v-39.966c-31.38-18.59-72.61-24.726-113.916-13.668-71.43 19.122-116.964 82.634-104.95 144.156 9.03-47.094 49.064-89.228 104.95-104.19z"fill="#FFAC8C"p-id="1189"></path><pathd="M540.752 427.864l442.628-81.456c10.728-1.974 20.62 6.252 20.628 17.148v-39.952c0-10.904-9.896-19.138-20.628-17.162l-442.628 81.456a17.456 17.456 0 0 0-14.302 17.162v39.966a17.454 17.454 0 0 1 14.302-17.162zM835.308 717.784c41.306-11.058 82.534-4.924 113.914 13.666v-39.966c-31.38-18.59-72.61-24.724-113.914-13.666-71.43 19.124-116.964 82.634-104.95 144.156 9.03-47.094 49.064-89.228 104.95-104.19zM412.536 807.182c41.304-11.058 82.532-4.924 113.914 13.666v-39.966c-31.38-18.59-72.608-24.724-113.914-13.666-71.43 19.124-116.964 82.634-104.948 144.156 9.03-47.092 49.064-89.228 104.948-104.19z"fill="#8F95E6"p-id="1190"></path><pathd="M244.204 54.496c10.366 0.59 25.582 1.834 41.386 4.454 62.82 10.452 161.1 42.724 191.96 142.34 10.292 33.238 25.916 64.698 44.612 86.018 33.838 3.914 59.066-6.566 59.066-6.566-39.7 0-75.24-53.874-93.68-113.424-30.86-99.616-129.14-131.888-191.96-142.34-15.806-2.618-31.02-3.864-41.386-4.454a12.668 12.668 0 0 0-13.394 12.65v21.598a12.806 12.806 0 0 1 3.396-0.276z"fill="#FFAC8C"p-id="1191"></path><pathd="M865.658 118.83c-9.74 0-17.636-7.89-17.636-17.62 0-9.378-7.082-17.566-16.448-18.172-10.264-0.664-18.796 7.456-18.796 17.568v0.604c0 9.732-7.896 17.62-17.636 17.62-9.386 0-17.58 7.076-18.186 16.434-0.664 10.254 7.462 18.78 17.582 18.78h0.604c9.74 0 17.636 7.89 17.636 17.62 0 9.378 7.082 17.566 16.448 18.172 10.264 0.664 18.796-7.456 18.796-17.568v-0.604c0-9.732 7.896-17.62 17.636-17.62h0.604c10.12 0 18.248-8.524 17.584-18.78-0.608-9.358-8.804-16.434-18.188-16.434zM188.01 811.662c-13.588 0-24.602-11.006-24.602-24.582 0-13.082-9.88-24.504-22.946-25.35-14.318-0.926-26.22 10.402-26.22 24.508v0.842c0 13.576-11.014 24.582-24.602 24.582-13.092 0-24.524 9.872-25.37 22.926-0.928 14.306 10.41 26.198 24.528 26.198h0.844c13.588 0 24.602 11.006 24.602 24.582 0 13.082 9.88 24.504 22.946 25.35 14.318 0.926 26.22-10.402 26.22-24.508v-0.842c0-13.576 11.014-24.582 24.602-24.582h0.844c14.118 0 25.456-11.892 24.53-26.198-0.85-13.054-12.282-22.926-25.376-22.926z"fill="#69EBFC"p-id="1192"></path></svg></template>

3、注册组件

• 在 docs\.vitepress\theme\components\TeekLayoutProvider.vue中注册组件

<scriptsetuplang="ts"name="TeekLayoutProvider">importMusicPlayer from"./MusicPlayer.vue";</script><template><Teek.Layout><template#nav-bar-content-after><div:class="ns.b('appearance')">...</div><MusicPlayer/></template></Teek.Layout></template>

4、提供音乐源文件

• 在 docs\public\music目录下放置音乐文件

• 修改docs\.vitepress\theme\components\MusicPlayer.vue文件里音乐源文件名称（修改为你自己的音乐名称）

5、验证

运行项目，验证效果：

结束。

关于我

我的博客主旨：

• 排版美观，语言精炼；
• 文档即手册，步骤明细，拒绝埋坑，提供源码；
• 本人实战文档都是亲测成功的，各位小伙伴在实际操作过程中如有什么疑问，可随时联系本人帮您解决问题，让我们一起进步！

🍀 个人网站

🍀 微信二维码

x2675263825 （舍得）， qq：2675263825。

🍀 微信公众号

《云原生架构师实战》

🍀 csdn

https:

版权：此文章版权归 One 所有，如有转载，请注明出处!

链接：可点击右上角分享此页面复制文章链接