铜钟音乐免费听歌指南零广告播放器5 分钟跑起来【免费下载链接】tonzhon-music铜钟「Tonzhon」: 干净纯粹的音乐平台 (铜钟已不再使用原来的 tonzhon.com现在的 tonzhon.com 不是正版的铜钟)项目地址: https://gitcode.com/GitHub_Trending/to/tonzhon-music铜钟音乐Tonzhon是一个用 React 写的开源 Web 音乐播放器主打免费、无广告的听歌体验。没有直播、社交动态和付费解锁找歌、双击播放、歌单收藏这些核心操作全部免费可用你的聆听列表还会保存在浏览器本地。想找一个干净的日常听歌入口或者想自己在本地跑一个极简音乐平台都可以直接用。 快速上手本地跑起一个铜钟音乐克隆仓库线上版无需安装即可体验本地运行需要 Node.js 环境git clone https://gitcode.com/GitHub_Trending/to/tonzhon-music cd tonzhon-music npm i启动开发服务器npm run devVite 会自动把/api接口代理到线上服务器所以本地页面能直接搜索并播放真实音乐资源不需要你自己再搭一套后端。打开浏览器访问本地地址在顶部搜索框里输入歌名双击列表中的歌曲就能听到效果了。另外两个常用脚本npm run build构建生产版本npm run preview预览构建结果。 功能一览能做什么、怎么触发功能能做什么怎么触发歌曲搜索按歌名、歌手名找歌中英文都行顶部搜索框输入关键词后按搜索播放控制播放、暂停、切歌、拖动进度双击列表歌曲或用底部播放条和进度条聆听列表记录播放队列并保存在本地播放时自动进入队列点击播放器右下角队列图标展开歌单管理创建自己的歌单发现并收藏别人的歌单歌曲悬停时点「加入歌单」图标歌词与下载查看滚动歌词、下载歌词文件播放区歌词入口下载相关功能需先登录 真实场景实战找一首叫不全名字的冷门歌想听一首记不清细节的老歌时把能想到的半个歌名或歌手名输进顶部搜索框结果页会带着封面和歌手信息列出来对上了就双击播放。顺手把它加入某个歌单下次找它不用重新搜。写代码时挂背景音乐写代码需要不抢注意力的 BGM 时在浏览器里打开铜钟音乐把播放模式切到随机或列表循环音量拉到舒服的位置——音量会写进 localStorage下次打开不用重新调。想停的时候按一下空格。播放条固定在页面底部翻多长的搜索结果它都在手边。通勤路上整理歌单通勤时想把最近听的东西归类在聆听列表里悬停某首歌会依次出现点赞、加入歌单等图标按心情把它们分进不同歌单。之后想听某一类直接找到对应歌单点播放就行。⌨️ 进阶技巧快捷键和隐藏操作空格键播放 / 暂停只有焦点在页面主体上时才响应输入框里打字不会被它截胡。双击播放这是 README 里标注的隐藏操作双击列表任意歌曲直接开听比逐个点按钮快。四种播放模式播放器右侧的模式图标可切换顺序、列表循环、单曲重复、随机。队列位置角标队列图标右上角的橙色数字显示「当前第几首 / 共几首」切歌前心里有数。下载歌曲需登录播放器上的下载图标在未登录时会先提示登录。 资源索引源码与文档关键模块路径相对仓库根目录src/components/player/player.jsx底部播放器主体进度条、播放模式、音量与队列逻辑都在这里src/components/SearchBar.jsx顶部搜索框src/components/listenlist-window/Listenlist.jsx聆听列表窗口src/stores/基于 Zustand 的状态管理当前播放歌曲、聆听列表、各弹窗状态分文件存放vite.config.js本地开发配置含/api代理与构建分包策略README.md官方功能清单、快捷键说明以及线上体验入口地址去试试如果现在的听歌 App 广告弹窗太多打开铜钟音乐搜一首你常听的歌感受下没有干扰是什么样子。想自己部署或改造的话先按上面快速上手一节克隆仓库跑起来。仓库也值得一颗 Star。【免费下载链接】tonzhon-music铜钟「Tonzhon」: 干净纯粹的音乐平台 (铜钟已不再使用原来的 tonzhon.com现在的 tonzhon.com 不是正版的铜钟)项目地址: https://gitcode.com/GitHub_Trending/to/tonzhon-music创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考