solid-aper

🎵 A simple music player built with solid.js and howler.js.

Installation

pnpm add solid-aper

Demo

https://xhofe.github.io/aper/

Usage

import type { Component } from "solid-js"
import { Aper } from "solid-aper"
import "solid-aper/dist/style.css"

const App: Component = () => {
  return (
    <div
      style={{
        width: "100vw",
        height: "100vh",
        display: "flex",
        "justify-content": "center",
        "align-items": "center",
        padding: "20px",
        "box-sizing": "border-box",
      }}
    >
      <Aper
        debug
        rememberVolume
        mainColor="#ADDDA9"
        defaultCover="https://jsd.nn.ci/gh/Xhofe/Xhofe/avatar/avatar.svg"
        audios={[
          {
            name: "name",
            url: "https://demo/name.flac",
            artist: "artist",
            lrc: "https://demo/name.lrc",
          },
          ...
        ]}
      />
    </div>
  )
}

export default App