mixmotion
1.0.0
具有 Mixcloud 集成和动态视觉效果的沉浸式音乐播放器
单击图像来试用该应用程序
对于只想通过全屏视觉效果发现一些新音乐的休闲用户，请点击上面的图片或下面的链接，在您的移动、桌面或电视设备上启动mixmotion网络应用程序。
https://lewhunt.github.io/mixmotion
播放时，您将进入沉浸式后仰模式，在用户不活动几秒钟后会出现各种各样的动态背景。以下是应用程序在播放模式之间转换的快速视频：
更多屏幕截图和视频位于本文档末尾。
开发人员还可以安装mixmotion Player 作为开源组件以在 React 应用程序中使用。最快的安装方法是通过下面的 npm i 命令。或者，通过获取此存储库中的 lib 文件夹以及关联的依赖项来手动集成它。
npm install mixmotion -player导入播放器并使用 Mixcloud URL 在您自己的应用程序中渲染mixmotion Player。它将使用其他未声明的道具的默认设置。
import { useEffect , useState } from "react" ;
import { mixmotion Player } from " mixmotion -player" ;
function Demo ( ) {
const [ url , setUrl ] = useState ( "" ) ;
useEffect ( ( ) => {
setUrl ( "https://www.mixcloud.com/discover/trance/?order=latest" ) ;
} , [ ] ) ;
return < mixmotion Player url = { url } /> ;
}
export default Demo ;高级演示和官方 Web 应用程序说明了如何进一步自定义组件。道具是为自定义按钮、视频背景和本地数据（保存的项目）指定的。本页下方详细介绍了完整的道具列表。
< mixmotion Player
url = { url }
showsData = { getSavedData }
customButtons = { customButtons }
backdropVideoList = { backdropVideoList }
enableBackdropVideo = { true }
> </ mixmotion Player > Soundcloud 和 Mixcloud 等已经提供了大量网络播放器和小部件，您可以将它们集成到您的应用程序中。
mixmotion提供了一些不同的东西；具有独特视觉效果的沉浸式全屏播放体验，同时仍然提供对 Mixcloud 庞大音乐目录的免费访问。
在底层，该组件构建在官方 Mixcloud API 和 Mixcloud Widget 之上。
它还利用我的另一个自定义组件 - 动态背景 - 创建带有 css 和画布动画效果分层的视频混合。视频被赋予随机的“混合模式”，因此它们与画布背景合并以产生各种颜色效果。
| 支柱 | 描述 | 默认 |
|---|---|---|
url | 要播放的内容的 Mixcloud URL ◦ 支持大多数 URL，例如播放列表、用户、流派、标签和单个节目/集 ◦ 这可以是完整的 URL 或部分 Mixcloud 密钥 | 无效的 |
showsData | 本地存储的数组显示可以用来代替 URL 的数据。 ◦ 该应用程序将其用于本地存储保存的节目。 | 无效的 |
backdropVideoList | 后台视频 URL 的字符串数组，当没有用户活动时，在播放模式下以随机顺序出现 | 无效的 |
enableBackdropVideo | 设置为true可在没有用户活动时显示上述背景视频。◦ UI 中的视频切换按钮（和本地存储标志）将覆盖此设置 | false |
enableUserLink | 设置为true将用户/艺术家副标题转换为反应路由器链接。 （在部署的应用程序中使用） | false |
collapsed | 设置为true可最小化播放器元数据和控件，以便为其他内容腾出空间。◦ 在应用程序中用于主页和搜索页面内容。 | false |
activityTimeout | 覆盖用户不活动的超时时间，然后在播放期间触发“不活动模式”以显示完整的动态视觉效果 ◦ 在应用程序中用于在主页和搜索页面中提供更长的超时时间。 | 4000 |
showWidget | 在页面底部显示官方 Mixcloud 小部件 - 带有自己的控件和进度栏 - 而不是自定义进度栏。 ◦ 官方小部件不支持电视设备的箭头键导航。 | false |
width | 覆盖播放器的宽度。 ◦ 注意：全屏是预期的用户体验，内容分层 ◦ 如果您覆盖宽度，则可能需要修改 CSS | 100% |
height | 覆盖玩家的高度。 ◦ 注意：全屏是预期的用户体验，内容分层 ◦ 如果您覆盖高度，则可能需要修改 CSS | 100% |
customButtons | 为播放器 UI 指定自定义按钮的集合 ◦ 如果未指定，将使用一组默认按钮。 | null |
autoplay | 设置为false以禁用自动播放内容的尝试 | true |
withExclusives | 设置为true以包含来自 Mixcloud API 的独家内容。◦ 注意：如果不进一步开发以支持 Mixcloud 用户登录身份验证，则不可能播放独占内容 | false |
listIndex | 如果请求的 URL 或本地 showData 数组中有多个节目/集，请设置初始媒体索引number | 0 |
style | 向播放器添加内联 CSS 样式 | null |
回调道具会在各种玩家事件中触发，因此您可以在事件发生时采取进一步的操作：
| 支柱 | 描述 |
|---|---|
onReady | 当媒体加载并准备播放时调用 |
onPlay | 当媒体在暂停或缓冲后开始或恢复播放时调用 |
onPause | 媒体暂停时调用 |
onBuffering | 当媒体开始缓冲时调用 |
onEnded | 媒体播放完毕时调用   |
onError | 尝试播放媒体时发生错误时调用 |
如高级演示中所示，可以使用自定义按钮覆盖播放器。有一系列带有自己的图标和行为的预构建操作类型，或者您可以使用“自定义”操作类型添加您自己的操作类型。
import { mixmotion Player , ButtonProps } from " mixmotion -player" ;
import { faBars } from "@fortawesome/free-solid-svg-icons" ;
const customButtons : ButtonProps [ ] = [
{ action : "save" , align : "right" } ,
{ action : "previous" , align : "center" } ,
{ action : "playpause" , align : "center" } ,
{ action : "next" , align : "center" } ,
{
action : "custom" ,
align : "right" ,
label : "Queue" ,
faIcon : faBars ,
onPress : ( ) => {
console . log ( "my custom button pressed" ) ;
} ,
} ,
] ;
function Demo ( ) {
return < mixmotion Player url = { url } customButtons = { customButtons } /> ;
}| 按钮道具 | 描述 |
|---|---|
action | 从custom或预构建操作之一中进行选择： collapse 、 github 、 mixcloud 、 mute 、 next 、 playpause 、 previous 、 save 、 videos |
align | 按钮的对齐方式。 left 、 center 、 right中选择 |
label | 显示在当前焦点按钮下方的提示文本标签。预构建的按钮操作使用相关标签。 |
faIcon | 字体很棒的图标。预先构建的按钮操作使用相关图标。 |
onPress | 按下按钮时调用。预构建的按钮操作有其自己的行为。 |
onRelease | 释放按钮时调用。目前未使用。 |
isSelectedFill | 设置为 true 时允许支持切换行为（以按钮填充的形式）。 |
disable | 设置为 true 时阻止按钮操作。 |
此自定义挂钩用于更新和检索用户喜爱/喜欢的节目。以下高级演示片段说明了如何使用本地保存的数据加载播放器。
import { mixmotion Player ,
useSavedItems ,
ShowsDataType
} from "./lib/ mixmotion Player" ;
function Demo ( ) {
const { getSavedItems } = useSavedItems ( ) ;
const getSavedData = useMemo ( ( ) => {
const savedItems = getSavedItems ( ) ;
if ( savedItems . length )
return {
label : "Saved Sets" ,
shows : savedItems . reverse ( ) ,
} as ShowsDataType ;
} , [ getSavedItems ] ) ;
return (
< mixmotion Player
showsData = { getSavedData }
/>
) ;
} 为了获得更多控制，您可以导入useStore自定义挂钩来全局访问玩家状态。查看mixmotion PlayerUI等内部组件以获取使用示例。下面的代码片段显示了获取当前节目标题和播放状态的基本用法：
// 1. import useStore
import { mixmotion Player , useStore } from " mixmotion -player" ;
// 2. get desired state values
const playing = useStore ( ( s ) => s . playing ) ;
const title = useStore ( ( s ) => s . title ) ;
console . log ( "playing: state " , playing ) ;
console . log ( "Current title: " , title ) ;
< mixmotion Player . . . / > ;| 桌面上的播放器 UI | 在移动设备上 |
搜索页
播放模式
播放模式（示例1）
点击查看 YouTube 上的宣传视频
我希望这对应用程序和组件有一个很好的介绍。
如果您有任何反馈、请求或问题，请转发评论？
如果您喜欢该组件或想要为其添加书签，请给它一颗星
