# 商品ページでサンプルボイスを再生させたい **URL:** \ **Category:** 技術的なQ＆A\ **Tags:** javascript, html\ **Created:** [January 17, 2024, 3:27am UTC](https://community.shopify.com/t/topic/285994 "2024-01-17T03:27:02Z")\ **Posts on this page:** 8\ **Page:** 1 ## AI-generated summary 商品ページで音声商品のサンプルボイスを再生する方法の検討。Shopify（Dawnテーマ、Sky Pilotで販売・DLは実現済み）。 - 実装方針: HTML5のaudio要素で再生。srcに音声ファイルのURLを指定。参考資料（HTML/audio要素）提示。 - URL取得: mp3はShopify管理画面の「コンテンツ＞ファイル」にアップロード可能。ファイル一覧からリンクをコピー。アップロード画面のスクリーンショットあり。その他形式の可否は不明。 - 商品との紐付け: 商品メタフィールド（例: テキスト型「音声ファイル」）に各商品の音声URLを保存。Liquid（Shopifyのテンプレート言語）でメタフィールドを参照してaudioタグを出力する方針。編集コードの提示あり。 - 進捗: 質問者は提案に納得し実装予定。 - 追加の課題: 別ユーザーがmp3アップロード時にエラー発生を報告。原因は不明で回答待ち。エラーのスクリーンショットあり。 現状: 元の要件は具体的な実装手順が固まったが、アップロードエラーの事象は未解決でスレッド継続。
**Author:** ![torano](https://avatars.discourse-cdn.com/v4/letter/t/65b543/32.png) [@torano](https://community.shopify.com/u/torano)\ **Post date:** [January 17, 2024, 3:27am UTC](https://community.shopify.com/t/topic/285994/1 "2024-01-17T03:27:02Z")
現在私たちのショップでは、音声商品を販売しています こちらはsky pilotを利用して販売、ダウンロード機能を実現できているのですが 商品ページでサンプルボイスを再生する機能を追加したいと考えています こちらどのように実現できるのでしょうか？ 使用しているテーマはDawnです ---
**Author:** ![NIIGAKI\_HYUGA](https://avatars.discourse-cdn.com/v4/letter/n/f05b48/32.png) [@NIIGAKI\_HYUGA](https://community.shopify.com/u/NIIGAKI_HYUGA)\ **Post date:** [January 17, 2024, 2:12pm UTC](https://community.shopify.com/t/topic/285994/2 "2024-01-17T14:12:19Z")
@torano 様 初めまして。新垣です。 下記のようなコードで、音声ファイルを挿入することができます。 ```markup ``` 下記が参考になるかと思います。 [https://catnose.me/learning/html/audio](https://catnose.me/learning/html/audio) [https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio](https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio) 以上、参考になりましたら幸いです。 ---
**Author:** ![torano](https://avatars.discourse-cdn.com/v4/letter/t/65b543/32.png) [@torano](https://community.shopify.com/u/torano)\ **Post date:** [January 18, 2024, 1:21am UTC](https://community.shopify.com/t/topic/285994/3 "2024-01-18T01:21:31Z")
回答いただきありがとうございます！ 大変参考になる書き込みありがとうございます！ src="Shopifyにアップロードした音声ファイルのリンク こちらのリンクは、どのように取得するかご存知ではないでしょうか？ 通常shopify上に音声ファイルはアップロードできない認識なので、どうしたら良いかと… こちら実現できれば完璧だと考えています！ ---
**Author:** ![NIIGAKI\_HYUGA](https://avatars.discourse-cdn.com/v4/letter/n/f05b48/32.png) [@NIIGAKI\_HYUGA](https://community.shopify.com/u/NIIGAKI_HYUGA)\ **Post date:** [January 18, 2024, 4:31am UTC](https://community.shopify.com/t/topic/285994/4 "2024-01-18T04:31:03Z")
@torano 様 mp3のような音声ファイルであればアップロード可能で、ファイル内からリンクをコピーできます。 ![スクリーンショット 2024-01-18 13.25.33.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/4/4/442222ee38baef9837f38a184904bc01af8fba45.jpeg) 他のファイル形式でアップロードできるかは不明なのですが、お試しください！ ---
**Author:** ![torano](https://avatars.discourse-cdn.com/v4/letter/t/65b543/32.png) [@torano](https://community.shopify.com/u/torano)\ **Post date:** [January 18, 2024, 4:39am UTC](https://community.shopify.com/t/topic/285994/5 "2024-01-18T04:39:07Z")
ありがとうございます！ 確かにこちらのリンクを貼ればサンプルボイスを再生することが可能ですね！ ただ特定の商品と結びつけることができないように見えるので、どうやってliquidファイルに書き込んでおくかが難しそうですね… ---
**Author:** ![NIIGAKI\_HYUGA](https://avatars.discourse-cdn.com/v4/letter/n/f05b48/32.png) [@NIIGAKI\_HYUGA](https://community.shopify.com/u/NIIGAKI_HYUGA)\ **Post date:** [January 18, 2024, 5:32am UTC](https://community.shopify.com/t/topic/285994/6 "2024-01-18T05:32:32Z")
商品に"音声ファイル"のようなテキスト定義のメタフィールドを作成しておき、その中に該当音声ファイルのリンクを入れておきます。 その上で、下記の編集したコードを入れることで紐付けが可能かと思います。 ```markup ``` ---
**Author:** ![torano](https://avatars.discourse-cdn.com/v4/letter/t/65b543/32.png) [@torano](https://community.shopify.com/u/torano)\ **Post date:** [January 18, 2024, 5:40am UTC](https://community.shopify.com/t/topic/285994/7 "2024-01-18T05:40:30Z")
天才だ…!!! ありがとうございます！ 新垣さんのような素晴らしい実力を持った方に回答いただき嬉しいです！ 早速試してみたいと思います 😭 ---
**Author:** ![Anonymous\_0a8381c51b18494acab13e8ab5853f87](https://avatars.discourse-cdn.com/v4/letter/a/cc9497/32.png) [@Anonymous\_0a8381c51b18494acab13e8ab5853f87](https://community.shopify.com/u/Anonymous_0a8381c51b18494acab13e8ab5853f87)\ **Post date:** [October 25, 2024, 8:51am UTC](https://community.shopify.com/t/topic/285994/8 "2024-10-25T08:51:44Z")
この質問を見て追加でお聞きしたいのですが、音源の mp3 をアップロードしてもエラーが出てしまうのですが、何か原因があるのでしょうか？ ![スクリーンショット 2024-10-21 19.06.56.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/b/4/b425e34ecaddbeb5247c234c13824f4d824974dd.png)