ミュージックプレーヤーの設定
Plain Jane および Plain Jane Interactive 向け
学べること
組み込みのミュージックプレーヤーを有効化およびカスタマイズする方法
独自のオーディオファイルをアップロードして設定する方法
ディスクアート、モバイル表示、カウントダウン統合などの高度なオプション
異なるデバイス向けのスタイリングと配置オプション
📂 ミュージックプレーヤー設定にアクセス
Shopify管理画面から、次へ移動します オンラインストア > テーマ
クリック： テキストの アクティブな Plain Jane テーマの隣に
テーマエディタで、を開きます テーマ設定 パネル（ペイントブラシのアイコン）
を選択します ミュージックプレーヤー メニューから
🎧 基本設定
ミュージックプレーヤーを有効にする
ミュージックプレーヤーを表示：デスクトップでプレーヤーを有効にする切り替え
モバイルでミュージックプレーヤーを表示：オプションのモバイル表示制御
カウントダウン音楽：パスワードページのカウントダウン機能との統合
オーディオファイルの設定
ミュージックURL：オーディオファイルをアップロード（MP3、WAV、OGG形式をサポート）
オーディオのプリロード：再生を速くするためにメタデータを自動的にプリロード
自動再生：ページ読み込み時に音楽が再生を開始（ブラウザのポリシーに依存）
💡 注意：近年のブラウザは、ユーザー操作があるまで音声付きの自動再生をブロックすることが多いです。
🎨 ビジュアルカスタマイズ
ディスク画像の表示
ディスクを表示：回転するディスク／ビニールレコード風の表示を切り替え
ディスクカバー画像：カスタムのアルバムアートをアップロード（推奨：最小200x200px）
ディスク回転：音楽再生中にアニメーションで回転する効果
プレーヤーコントロール
ミュージックプレーヤーボタンの色：再生／一時停止ボタンの色をカスタマイズ
再生ボタン：大きくアクセスしやすい再生コントロール
進捗バー：再生進行状況の視覚的インジケーター
ナビゲーションコントロール：再生／一時停止の機能
📱 モバイル最適化
モバイル表示オプション
モバイルでミュージックプレーヤーを表示：モバイルでの表示を個別に制御
モバイル再生の配置：ディスクが非表示のときに自動で配置を調整
レスポンシブデザイン：プレーヤーがさまざまな画面サイズに適応
モバイル固有の機能
タッチに優しいコントロール：モバイル向けに最適化されたボタンサイズ
帯域幅への配慮：データ節約のためにモバイルで無効にするオプション
パフォーマンス最適化：より軽量なモバイル体験
🎵 高度な機能
楽曲情報の表示
現在のトラック名：楽曲バーに表示
トラックタイトル：カスタマイズ可能なトラック情報
進捗追跡：リアルタイムの再生進行状況
統合オプション
パスワードページの統合：カウントダウンタイマー中に音楽を再生可能
テーマ同期：全体のテーマアニメーションと連動
ページ間の継続性：設定されていればユーザーが移動しても音楽が続く
⚙️ 技術的設定
オーディオ設定
メタデータのプリロード：初回読み込みを高速化
オーディオ要素：フォールバック対応のHTML5オーディオ
ファイル形式のサポート：MP3（推奨）、WAV、OGG
ブラウザ互換性：最新のブラウザ全般で動作
パフォーマンスに関する考慮事項
ファイルサイズ：最適なパフォーマンスのためにオーディオファイルは5MB以下に保つ
読み込み戦略：速度と機能のバランスのためのメタデータプリロード
モバイルデータ：モバイル利用者のデータ使用量を考慮
🎯 ベストプラクティス
オーディオファイルの準備
フォーマット：互換性とファイルサイズのバランスのためにMP3を使用
画質：128〜256 kbpsは良好な品質と適切なファイルサイズを提供
長さ：バックグラウンド音楽には短めのループやアンビエントトラックを検討
音量：突然の音量変化を防ぐためにオーディオレベルを正規化
ユーザー体験
控えめな実装：バックグラウンド音楽は気を散らさないように補完的であるべき
ユーザーコントロール：必ず明確な再生／一時停止コントロールを提供する
モバイル考慮事項：帯域が制限されたモバイルでテストする
アクセシビリティ：コントロールがキーボードで操作可能であることを確認する
🔧 トラブルシューティング
よくある問題
音楽が自動再生されない理由
近年のブラウザは音声再生前にユーザー操作を必要とします
モバイルパフォーマンス
大きなオーディオファイルはモバイルのパフォーマンスに影響を与える可能性があります
データに敏感なユーザーのためにモバイルで無効にすることを検討してください
ブラウザの開発者ツールだけでなく実機のモバイルでテストしてください
ファイル読み込みの問題
オーディオファイルのURLがアクセス可能であることを確認してください
ファイル形式の互換性を確認してください
ファイルサイズが大きすぎないか確認してください
ブラウザ対応
Chrome/Edge：すべての機能を完全にサポート
Safari：自動再生ポリシーがより厳しい場合があります
Firefox：標準的な構成で良好にサポート
モバイルブラウザ：デバイスやブラウザによって異なります
最終更新