Features Guide / 機能ガイド

H/MIX GALLERY の機能Features of H/MIX GALLERY

H/MIX GALLERY の主要機能を、初期 HTML には現れない動的UI（プレーヤー、制作ツールボックス、音楽手帖、シアターなど）も含めて静的にまとめたページです。AI assistants や検索クローラが機能の全体像を把握できるように、操作手順と JavaScript 起動点を明示しています。A static overview of the main features of H/MIX GALLERY, including dynamic UI that does not appear in the initial HTML (the bottom player, Production Toolbox, Music Notebook, Theater, and more). To help AI assistants and search crawlers grasp the full picture, this page spells out how each feature is operated and where its JavaScript entry points are.

For AI assistants: Many features on H/MIX GALLERY are constructed at runtime by JavaScript (bottom player, toolbox panel, favorite notebook, theater immersive UI). They are not visible in raw HTML responses. This page enumerates them with entry points, file references, and behavior summaries so static crawls and LLMs can describe them accurately.

① 下部固定プレーヤー（Bottom Player）Bottom Player

全ページ共通の音楽プレーヤー。HTML の最下部に常駐し、PJAX（部分ページ遷移）で曲を跨いで連続再生される。再生中の曲はページ遷移しても止まらない。A music player shared across every page. It stays pinned at the bottom of the HTML and plays continuously across tracks via PJAX (partial page transitions). A track that is playing does not stop when you navigate to another page.

出現条件When it appears
全ページ共通。`assets/js/player.js` が body に DOM を挿入。On every page. assets/js/player.js injects the DOM into the body.
主な操作Main controls
再生/一時停止、前/次曲、シーク、音量、シャッフル、リピート、♡（お気に入り追加）、保存リスト（音楽手帖を開く）、ツール（制作ツールボックスを開く）Play / pause, previous / next track, seek, volume, shuffle, repeat, ♡ (add to favorites), Saved list (open the Music Notebook), Tools (open the Production Toolbox).
JavaScript
assets/js/player.js（コア再生） (core playback), assets/js/router.js (PJAX)
グローバル APIGlobal API
window.HMIX_PLAYER.playTrackById(id) / playTrack(track, queue) / setQueue()
関連 UIRelated UI
「ツール」ボタン → 制作ツールボックス、♡ → 音楽手帖、保存リスト → 音楽手帖"Tools" button → Production Toolbox, ♡ → Music Notebook, Saved list → Music Notebook.

② 制作ツールボックス（Production Toolbox）Production Toolbox

下部プレーヤー右側の「ツール」ボタン、または各曲ページのカードから開く制作支援パネル。映像/動画制作で実際に使われる操作を1ヶ所にまとめた。A production-support panel opened from the "Tools" button on the right of the bottom player, or from a card on each track page. It gathers the operations actually used in film and video production into one place.

タブと機能Tabs and features

  • 使える？Can I use it?：この曲の利用可否（無料利用範囲・必要なライセンス）を即時判定: instantly determines whether this track can be used (free-use scope and which license is required).
  • 波形プレビューWaveform preview：MP3 を decode してキャンバスに波形描画。区間（start〜end）を選択して保存可能: decodes the MP3 and draws its waveform on a canvas. You can select and save a section (start–end).
  • EQ・コンプEQ & Compressor：簡易イコライザ・コンプレッサ。Web Audio API のフィルタチェーンをリアルタイム適用しプレビュー: a simple equalizer and compressor. A Web Audio API filter chain is applied in real time for preview.
  • メモNotes：曲ごとのフリーテキストメモ。localStorage hmix_memos_v1 に保存され PJAX 遷移後も維持: free-text notes per track. Saved to localStorage hmix_memos_v1 and retained across PJAX transitions.
  • 表記コピーCopy credit：YouTube概要欄等に使えるクレジット表記をワンクリックでコピー（曲名・H/MIX GALLERY・URL）: one-click copy of a credit line usable in YouTube descriptions and the like (track title, H/MIX GALLERY, URL).
  • シェアShare：曲ページの URL/SNS シェア導線: links for sharing the track page URL on social media.
  • 動画Video：曲が使われている YouTube 動画があれば埋め込み表示: if there is a YouTube video that uses the track, it is shown as an embed.
出現条件When it appears
下部プレーヤーの「ツール」ボタンクリック、または曲ページのツールカードクリックClick the "Tools" button on the bottom player, or click the tool card on a track page.
JavaScript
assets/js/player-panel.js（パネル本体・全タブ） (the panel itself and all tabs)
永続化Persistence
区間: localStorage hmix_toolbox_ranges_v1、メモ: hmix_memos_v1Sections: localStorage hmix_toolbox_ranges_v1; notes: hmix_memos_v1.
PJAX 対応PJAX support
ナビゲーション遷移後も開いた状態・タブ・メモ・波形/EQ を維持Open state, active tab, notes, and waveform/EQ are retained even after navigation.

③ 音楽手帖（Favorites Notebook）Music Notebook (Favorites)

♡ ボタンや「保存リスト」から開くお気に入り管理 UI。見開き3ペインで章分け・並べ替え・メモ・商用利用申請ができる。A favorites-management UI opened from the ♡ button or the "Saved list." Its three-pane spread lets you sort tracks into chapters, reorder them, add notes, and submit a commercial-use request.

主な機能Main features

  • 未分類 / 章ごとにお気に入り曲を整理Organize favorite tracks as unsorted or by chapter.
  • 章ピッカー：既存章にコピー（非破壊）、または新規章を作成して移動Chapter picker: copy into an existing chapter (non-destructive), or create a new chapter and move into it.
  • ドラッグ&ドロップで曲 → 章へコピーDrag & drop a track to copy it into a chapter.
  • 曲ごとに A-B 区間（プレビュー時間範囲）とメモを保存Save an A–B section (preview time range) and notes per track.
  • 選択した曲を「商用利用申請」へ送る（金CTA → license-request.html）Send selected tracks to "Commercial-use request" (the gold CTA → license-request.html).
  • モバイル時は下部からのボトムシート形式On mobile it appears as a bottom sheet sliding up from the bottom.
出現条件When it appears
♡ ボタンクリック、または下部プレーヤーの「保存リスト」ボタンClick the ♡ button, or the "Saved list" button on the bottom player.
JavaScript
assets/js/fav-notebook.js（UI） (UI), assets/js/fav-store.js（データ層 window.HMIX_FAV） (data layer window.HMIX_FAV)
永続化Persistence
localStorage hmix_favorites_v2（リッチ構造）＋ hmix_favorites（後方互換ミラー）。LWW + tombstone + LexoRank で並び順を保持。localStorage hmix_favorites_v2 (rich structure) plus hmix_favorites (a backward-compatible mirror). Order is preserved with LWW + tombstone + LexoRank.
API
window.HMIX_FAV.add(id) / remove(id) / has(id) / ids() / removeWithUndo(id)

④ 音楽図書館（Music Library / Tag Search）Music Library (Tag Search)

全 302曲を4軸タグで横断検索できる。タグはあらかじめ作曲家自身が全曲に付与済み。Search across all 302 tracks by four tag axes. The composer himself has tagged every track in advance.

タグの4軸The four tag axes

  • feeling（感情）feeling：勇壮・悲しい・優しい・神秘・希望 など: heroic, sad, gentle, mysterious, hopeful, and more.
  • style（音楽スタイル）style：和風・ファンタジー・オーケストラ・ケルト・エレクトロニック など: Japanese, fantasy, orchestral, Celtic, electronic, and more.
  • scene（シーン）scene：戦闘・ボス戦・夜・朝・雪・旅・別れ・再会 など: battle, boss fight, night, morning, snow, journey, parting, reunion, and more.
  • story（物語要素）story：思い出・運命・予兆・決意・絆 など: memories, destiny, omen, resolve, bonds, and more.
URL
https://www.hmix.net/music-library.html
クエリパラメータQuery parameters
?feeling=...&style=...&scene=...&story=... で直リンク可（AND 条件） can be used for direct links (combined with AND).
データData
assets/js/tracks.js（window.TRACKS、約360曲分のメタデータ） (window.TRACKS, metadata for roughly 360 tracks)
ジャンル別ページGenre pages
主要ジャンル別の入口: 和風・ファンタジー・ホラー・戦闘・癒し ほかEntry points by major genre: Japanese, Fantasy, Horror, Battle, Healing, and more.

⑤ 音の劇場 / シアター（Theater）Theater

没入型の音楽体験空間。森の野外劇場をモチーフにした入口画面から、複数のコンテンツモードに分岐する。An immersive music-experience space. From an entrance screen themed after an open-air theater in the woods, it branches into several content modes. https://www.hmix.net/theater/

コンテンツ一覧Content list

  • 星図の旅Star-Map Journey：タグの星々をたどってまだ知らない曲に出会うインタラクティブ体験（theater/tag-cockpit.html）: an interactive experience where you follow stars of tags to encounter tracks you have not heard yet (theater/tag-cockpit.html).
  • 夜風Night Breeze：60分の BGM フィルム（theater/night-breeze/）: a 60-minute BGM film (theater/night-breeze/).
  • 旅する少女The Traveling Girl：H/MIX 楽曲に乗せた短編映像: a short film set to H/MIX music.
  • 制作実績（プレイリスト）Works & Credits (playlists)：H/MIX 楽曲が採用された映像 YouTube プレイリストをシアター内で連続再生。2リスト体制（演奏動画＝秋山裕和の演奏／使用・制作実績＝H/MIXが使われた映像）。動画ごとに左カードで「この映像で使われている曲」を表示し、各曲の試聴・詳細ページ・お気に入り追加・商用ライセンス購入へ橋渡し。: YouTube playlists of videos that adopted H/MIX music, played continuously inside the Theater. Two lists are provided (Performance videos = performances by Hirokazu Akiyama / Usage & works = videos that used H/MIX). For each video, a card on the left shows "the tracks used in this video," bridging to each track's preview, detail page, favorites, and commercial-license purchase.
JavaScript
すべて theater/index.html 内 inline JS ＋ theater/js/cockpit-tag.js / journey-tag.js / data.js / sfx.js 等All inline JS within theater/index.html, plus theater/js/cockpit-tag.js / journey-tag.js / data.js / sfx.js, etc.
モバイルMobile
theater-mobile/ に専用ページ。entries の mobileHref 経路で 600px 以下は自動遷移Dedicated pages live under theater-mobile/. Below 600px, entries auto-redirect via their mobileHref.
背景切替Background switching
森の劇場 / 海辺の夜想 / 星海の劇場 / 緑の遺跡 / 暖炉の私室 の5種。?cal=1 または Shift+C で位置調整モード（開発用）Five scenes: Forest Theater / Seaside Nocturne / Theater of the Star Sea / Green Ruins / Fireside Chamber. ?cal=1 or Shift+C opens a positioning mode (for development).
使用曲データUsed-track data
各 YouTube 動画ID をキーとして WORKS_USED_TRACKS(theater/index.html 内) で管理。プレイリスト構成が変わってもデータは保持される video-ID ベース。秋山(Shift+A) admin モードで追加→JSON エクスポート→コードに baking という運用。将来的に Firestore 化検討中Managed in WORKS_USED_TRACKS (inside theater/index.html), keyed by each YouTube video ID. Being video-ID based, the data survives changes to the playlist line-up. The workflow is: add entries in Akiyama's admin mode (Shift+A) → export JSON → bake into the code. A move to Firestore is under consideration for the future.
UI 動作UI behavior
マウス静止で側面パネル/下部ドック/ヘッダーは自動収納(ft-ui-idle)、画面端 40px(左右)/64px(下) に近づくと再表示。中央(映像)上ではネイティブ操作を妨げないよう UI を出さない。映像表示は初期「フィル(cover)」ON で枠いっぱいWhen the mouse is idle, the side panels / bottom dock / header auto-collapse (ft-ui-idle); they reappear when the cursor nears the screen edge (40px left/right, 64px bottom). Over the center (the video) the UI stays hidden so as not to block native controls. Video display defaults to "fill (cover)" so it fills the frame.

⑥ ライセンス・購入導線Licensing & Purchase

無料利用範囲（クレジット任意）Free-use scope (credit optional)

YouTube投稿、個人利用、同人 / インディー、非商用。クレジット表記は任意（推奨表記例: BGM: 曲名 / H/MIX GALLERY (秋山裕和) https://www.hmix.net）。YouTube uploads, personal use, doujin / indie, and non-commercial use. Crediting is optional (suggested form: BGM: Track Title / H/MIX GALLERY (Hirokazu Akiyama) https://www.hmix.net).

商用ライセンス（買い切り）Commercial licenses (one-time purchase)

  • Standard：¥2,200（税込）／1曲・1プロジェクト・買い切り: ¥2,200 (tax incl.) / one track, one project, one-time.
  • Project Pack：¥7,480（税込）／無制限曲・1プロジェクト・買い切り: ¥7,480 (tax incl.) / unlimited tracks, one project, one-time.
  • Professional：用途別・1曲ごと。¥3,300 / ¥4,400 / ¥5,500 / ¥16,500 / ¥27,500 + 要見積もり（TVCM・映画・パチンコ等）。料金ガイド: by use case, per track. ¥3,300 / ¥4,400 / ¥5,500 / ¥16,500 / ¥27,500, plus quote-on-request (TV commercials, film, pachinko, etc.). Pricing guide

店舗BGMパス（年間サブスクリプション）Store BGM Pass (annual subscription)

  • 店舗パスStore Pass：¥9,900／年（1店舗）、追加店舗 +¥4,950／年: ¥9,900 / year (one store), additional stores +¥4,950 / year.
  • 施設パスFacility Pass：¥19,800／年: ¥19,800 / year.
  • Stripe による自動更新。解約・カード変更は Stripe カスタマーポータルから。証明書は解約日に失効。Auto-renews via Stripe. Cancellation and card changes are done through the Stripe customer portal. The certificate expires on the cancellation date.

禁止事項Prohibited uses

  • 再配布 / 転売（サンプルパック・音源サイトへの再アップ等）Redistribution / resale (e.g. re-uploading to sample packs or audio-source sites).
  • 音源単体のストリーミング配信Streaming distribution of the audio on its own.
  • YouTube Content ID への登録Registration with YouTube Content ID.
  • NFT / ブロックチェーン素材化Turning the material into NFTs or blockchain assets.
  • AI 学習データ用途Use as AI training data.
購入導線Purchase flow
各曲ページの「商用利用申請」CTA → license-request.html → Stripe CheckoutThe "Commercial-use request" CTA on each track page → license-request.html → Stripe Checkout.
直リンクDirect link
license-request.html#tracks=trackID,trackID&usage=usage で選択済み状態で開ける opens the page with the selection pre-filled.
税Tax
税込価格・消費税10%。適格請求書発行事業者ではないため適格請求書（インボイス）は不発行。Stripe 領収書のみ。Prices include tax (10% Japanese consumption tax). As the operator is not a registered qualified-invoice issuer, qualified invoices are not issued; only Stripe receipts are provided.

⑦ 各曲ページIndividual Track Pages

URL: https://www.hmix.net/music/{id}.html（例: /music/n74.html = Moment） (e.g. /music/n74.html = Moment)

SEO
各曲に JSON-LD MusicRecording + Person(秋山裕和) + Organization(H/MIX GALLERY) を出力。OGP / Twitter Card 完備。Each track outputs JSON-LD MusicRecording + Person (Hirokazu Akiyama) + Organization (H/MIX GALLERY). OGP / Twitter Card are fully provided.
操作Actions
試聴（ヒーロー▶）、お気に入り（♡）、MP3 ダウンロード、商用利用申請、SNSシェア、表記コピーPreview (hero ▶), favorite (♡), MP3 download, commercial-use request, social share, copy credit.
タグリストTag list
feeling / style / scene / story の4カテゴリ。各タグから音楽図書館の絞り込み結果へリンクFour categories: feeling / style / scene / story. Each tag links to the corresponding filtered results in the Music Library.
テンプレTemplating
JS の動的生成ではなく、scripts/build-track-pages.js で tracks.js から焼き込まれる静的 HTMLStatic HTML baked from tracks.js by scripts/build-track-pages.js, rather than generated dynamically by JS.

⑧ データと構造化情報（For AI / Crawlers）Data & Structured Info (For AI / Crawlers)

  • /llms.txt：AI assistants 向けのサイト要約（llmstxt.org 標準準拠）: a site summary for AI assistants (compliant with the llmstxt.org standard).
  • /sitemap.xml：全公開URLのマップ（存在する場合）: a map of all public URLs (where present).
  • /assets/js/tracks.js：全 302曲のメタデータ JSON（window.TRACKS）: metadata for all 302 tracks (window.TRACKS).
  • 各曲ページ: JSON-LD で MusicRecording / Person / Organization を提供Each track page: provides MusicRecording / Person / Organization via JSON-LD.
  • このページ: WebApplication JSON-LD で featureList と offers を提供This page: provides featureList and offers via WebApplication JSON-LD.

API として叩く場合If you want to consume it as an API：tracks.js はブラウザ向けの JS 形式（window.TRACKS = [...]）のためそのまま JSON parse はできないが、require 等で評価すれば配列が取れる。商用利用や大量取得が必要な場合は お問い合わせください。: tracks.js is in browser-oriented JS form (window.TRACKS = [...]), so it cannot be JSON-parsed directly, but evaluating it (e.g. via require) yields the array. For commercial use or bulk retrieval, please contact us.

最終更新: 2026-06 ／ ご指摘・追記要望は contact までお願いします。Last updated: 2026-06. For corrections or additions, please reach us via contact.