Radioplayer_api

单个或多站无线电播放器

本文档提供了有关使用HTML，CSS和JavaScript构建的单个 /多站无线电播放器的结构，配置和自定义的详细指南。该播放器动态获取歌曲信息，并提供了使用本地API或预先配置的基于Web的API的灵活性。

演示屏幕截图

1。概述

该无线电播放器提供了一个用户友好的界面，用于享受在线广播电台。它允许添加多个电台，每个站都有自己的实时流，歌曲信息，社交媒体链接等。站配置直接在HTML内完成，从而简化了自定义过程。

2。文件结构

• index.html ：包含播放器的主HTML，包括：
  • 视觉结构和交互元素。
  • <script>标签中的站配置。
• js/main.js ：包含为玩家功能提供动力的JavaScript代码，包括：
  • 音频播放器管理。
  • 动态获取和更新歌曲信息（使用本地或Web API）。
  • 渲染站列表。
  • 控制界面元素，例如按钮，菜单和模态。
• api.php ：（可选）PHP脚本充当本地API，可从无线电流中提取元数据，提供歌曲信息。
• css/main.min.css ：定义玩家的视觉样式，包括布局，颜色和排版。
• custom.css ：允许添加自定义样式。
• assets/ ：存储图像，图标和其他视觉资产的文件夹。

3。详细的配置

3.1。配置电台（ index.html ）

广播电台在index.html文件中的<script>块中配置，定义window.streams.stations对象。每个站都是具有以下属性的对象：

配置示例：

 < 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。出版

1. 确保在服务器上正确配置并访问本地API（ api.php ）。
2. 将所有文件和文件夹（HTML，CSS，JavaScript，PHP，Images）上传到您的Web服务器。

免费托管

7。其他考虑

• 版权所有：确保您有权使用广播播放器中使用的所有图像，音乐和其他内容。
• 流元数据：歌曲信息的准确性取决于广播电台流提供的元数据的质量。