xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

web podcast player & music player All In One

web podcast player & music player All In One

起因

发现好多 podcast 的播放器,竟然没有音量调节自动循环播放等基础功能!
这种设计的 UX 太差了,所以只好自己动手了!

image

https://beyondcodefm.com/zh-CN/66cee1f156bfd3907ab00fc9

image

https://www.xiaoyuzhoufm.com/episode/66cee1f156bfd3907ab00fc9

solutions

手搓一个 web podcast player

github OSS

...

todos...

Web Podcast Player

App Podcast Player

Mini Program Podcast Player

demos

loop / auto play

<figure>
  <figcaption>C1 English Listening Practice - Investing in Your Education</figcaption>
  <audio
  controls
  loop
  muted="false"
  src="file:///Users/xgqfrms-mm/Desktop/C1%20English%20Listening%20Practice%20-%20Investing%20in%20Your%20Education.mp3"></audio>
  <a href="file:///Users/xgqfrms-mm/Desktop/C1%20English%20Listening%20Practice%20-%20Investing%20in%20Your%20Education.mp3"> Download audio </a>
</figure>


音频资源防盗链

blob

https://media.xyzcdn.net/lpodmkDpc1EPE8jw_OqLJdc29Nnw.m4a

podcast

播客

image

https://podcasts.apple.com/cn/

image

https://podbay.fm/p/witnessed-night-shift

image

https://apps.apple.com/us/app/player-fm-podcast-app/id940568467

image

https://github.com/amugofjava/anytime_podcast_player

https://bento.me/beyondcode

https://beyondcodefm.com/zh-CN

refs

https://www.cnblogs.com/xgqfrms/p/18425599

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio



©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!

原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!


posted @   xgqfrms  阅读(5)  评论(1编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)
历史上的今天:
2022-09-17 2023 年上海交通大学在职研究生非全日制硕士研究生报考指南 All In One
2022-09-17 Google Chrome Privacy Sandbox All In One
2022-09-17 H5 广告落地页低代码可视化搭建系统 All In One
2021-09-17 vue 如何不复用组件的 DOM All In One
2021-09-17 Vue warn All In One
2021-09-17 2021 最新 XBOX 打丧尸游戏 All In One
2020-09-17 使用 js 用最简单的方法实现微信红包的随机算法 All In One
点击右上角即可分享
微信分享提示