現在私たちのショップでは、音声商品を販売しています
こちらはsky pilotを利用して販売、ダウンロード機能を実現できているのですが
商品ページでサンプルボイスを再生する機能を追加したいと考えています
こちらどのように実現できるのでしょうか？
使用しているテーマはDawnです
Topic summary
商品ページで音声商品のサンプルボイスを再生する方法の検討。Shopify（Dawnテーマ、Sky Pilotで販売・DLは実現済み）。
- 実装方針: HTML5のaudio要素で再生。srcに音声ファイルのURLを指定。参考資料（HTML/audio要素）提示。
- URL取得: mp3はShopify管理画面の「コンテンツ＞ファイル」にアップロード可能。ファイル一覧からリンクをコピー。アップロード画面のスクリーンショットあり。その他形式の可否は不明。
- 商品との紐付け: 商品メタフィールド（例: テキスト型「音声ファイル」）に各商品の音声URLを保存。Liquid（Shopifyのテンプレート言語）でメタフィールドを参照してaudioタグを出力する方針。編集コードの提示あり。
- 進捗: 質問者は提案に納得し実装予定。
- 追加の課題: 別ユーザーがmp3アップロード時にエラー発生を報告。原因は不明で回答待ち。エラーのスクリーンショットあり。
現状: 元の要件は具体的な実装手順が固まったが、アップロードエラーの事象は未解決でスレッド継続。
@torano 様
初めまして。新垣です。
下記のようなコードで、音声ファイルを挿入することができます。
下記が参考になるかと思います。
https://catnose.me/learning/html/audio
https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio
以上、参考になりましたら幸いです。
回答いただきありがとうございます！
大変参考になる書き込みありがとうございます！
src="Shopifyにアップロードした音声ファイルのリンク
こちらのリンクは、どのように取得するかご存知ではないでしょうか？
通常shopify上に音声ファイルはアップロードできない認識なので、どうしたら良いかと…
こちら実現できれば完璧だと考えています！
ありがとうございます！
確かにこちらのリンクを貼ればサンプルボイスを再生することが可能ですね！
ただ特定の商品と結びつけることができないように見えるので、どうやってliquidファイルに書き込んでおくかが難しそうですね…
商品に"音声ファイル"のようなテキスト定義のメタフィールドを作成しておき、その中に該当音声ファイルのリンクを入れておきます。
その上で、下記の編集したコードを入れることで紐付けが可能かと思います。
天才だ…!!!
ありがとうございます！
新垣さんのような素晴らしい実力を持った方に回答いただき嬉しいです！
早速試してみたいと思います 
1 Like
