单个或多站无线电播放器
本文档提供了有关使用HTML，CSS和JavaScript构建的单个 /多站无线电播放器的结构，配置和自定义的详细指南。该播放器动态获取歌曲信息，并提供了使用本地API或预先配置的基于Web的API的灵活性。
演示屏幕截图
1。概述
该无线电播放器提供了一个用户友好的界面，用于享受在线广播电台。它允许添加多个电台，每个站都有自己的实时流，歌曲信息，社交媒体链接等。站配置直接在HTML内完成，从而简化了自定义过程。
2。文件结构
-
index.html：包含播放器的主HTML，包括：- 视觉结构和交互元素。
-
'>< script > window . streams = { timeRefresh : 10000 , // Refresh time in milliseconds stations : [ { name : "Example FM" , hash : "examplefm" , description : "The best music!" , logo : "assets/examplefm_logo.png" , album : "assets/default_album.jpg" , cover : "assets/default_album.jpg" , api : "api.php?url=https://examp*le.*c*om/stream" , // Local API (optional) stream_url : "https://examp*le.*c*om/stream" , server : "itunes" , // Use iTunes API social : { facebook : "https://*f*ace*book.com/examplefm" , instagram : "https://in*st*ag*ram.com/examplefm" } } , // ... more stations ] } ; script >
3.2。本地API（可选）
如果您选择使用本地API（ api.php ），请按照以下说明进行设置：
-
配置：
- 在
api.php文件中，$allowedUrls变量应列出所有允许的流URL。
- 在
-
功能：
-
getMp3StreamTitle()：从流元数据中提取歌曲标题。 -
extractArtistAndSong()：分开艺术家和歌曲标题。 -
getAlbumArt()：获取专辑art（当前设置用于使用iTunes API）。 -
updateHistory()：保持歌曲的历史。
-
笔记：
如果api字段在电台配置中留空，则将默认为预配置的Web API。确保您使用的Web API在JavaScript代码中运行并正确设置。
4。自定义，界面，交互和出版物
有关：
-
自定义视觉样式（
css/main.min.css和custom.css） -
使用自定义图像和图标（
assets/） - 用户界面元素（标题，电台选择器，历史等）
- 用户导航和互动
- 将播放器发布到Web服务器
4.1。关键元素
- 标题：显示电台徽标和按钮，以访问历史记录，站点列表和移动菜单。
- 播放器部分：包含专辑艺术，歌曲信息（艺术家和标题），播放控件（Play/Pause，Next/Prond Station）和音量控制。
- 可视化器：一个简单的音频可视化器，对音乐进行动态响应。
-
外栏外栏：
- 电台列表：显示所有带有缩略图的电台。
- 历史：显示了最近播放歌曲的历史。
- 歌词模式：显示当前播放歌曲的歌词（如果通过迷走色API获得）。
4.2。导航
- 电台选择：单击站列表中的站点以开始播放。
- 歌曲历史：通过标题中的按钮访问历史记录。
- 歌曲歌词：单击“歌词”按钮打开歌词模式。
- 移动菜单：标题中的菜单按钮可在移动设备上访问相同的功能。
5。自定义
5.1。视觉样式（ css/main.min.css和custom.css ）
- 可以通过编辑CSS规则来自定义颜色，字体，间距，元素大小和其他视觉属性。
5.2。图像和图标（ assets/ ）
- 用自己的
assets文件夹中的默认图像替换默认图像，以自定义车站徽标，专辑报道和图标。
6。出版
- 确保在服务器上正确配置并访问本地API（
api.php）。 - 将所有文件和文件夹（HTML，CSS，JavaScript，PHP，Images）上传到您的Web服务器。
免费托管
7。其他考虑
- 版权所有：确保您有权使用广播播放器中使用的所有图像，音乐和其他内容。
- 流元数据：歌曲信息的准确性取决于广播电台流提供的元数据的质量。