商品ページでサンプルボイスを再生させたい

[torano]

現在私たちのショップでは、音声商品を販売しています

こちらはsky pilotを利用して販売、ダウンロード機能を実現できているのですが

商品ページでサンプルボイスを再生する機能を追加したいと考えています

こちらどのように実現できるのでしょうか？

使用しているテーマはDawnです

[NIIGAKI_HYUGA · Accepted solution]

@torano 様

初めまして。新垣です。

下記のようなコードで、音声ファイルを挿入することができます。

<div>
 <audio controls controlslist="nodownload" src="Shopifyにアップロードした音声ファイルのリンク"> 
 </audio>
</div>

<script>
  // 1分再生されたら再生を停止して、再生位置を最初に戻す。
  var audio = document.getElementById('sampleAudio');
  audio.addEventListener('timeupdate', function() {
    if (this.currentTime > 60) {
      this.pause();
      this.currentTime = 0;
    }
  });
</script>

下記が参考になるかと思います。

https://catnose.me/learning/html/audio

https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio

以上、参考になりましたら幸いです。

[torano]

回答いただきありがとうございます！

大変参考になる書き込みありがとうございます！

src="Shopifyにアップロードした音声ファイルのリンク

こちらのリンクは、どのように取得するかご存知ではないでしょうか？
通常shopify上に音声ファイルはアップロードできない認識なので、どうしたら良いかと...

こちら実現できれば完璧だと考えています！

[NIIGAKI_HYUGA]

@torano 様

mp3のような音声ファイルであればアップロード可能で、ファイル内からリンクをコピーできます。

他のファイル形式でアップロードできるかは不明なのですが、お試しください！

[torano]

ありがとうございます！

確かにこちらのリンクを貼ればサンプルボイスを再生することが可能ですね！

ただ特定の商品と結びつけることができないように見えるので、どうやってliquidファイルに書き込んでおくかが難しそうですね...

[NIIGAKI_HYUGA]

商品に"音声ファイル"のようなテキスト定義のメタフィールドを作成しておき、その中に該当音声ファイルのリンクを入れておきます。

その上で、下記の編集したコードを入れることで紐付けが可能かと思います。

<audio controls controlslist="nodownload" src="{{ product.metafields.namespace.key}}"> 

[torano]

天才だ...!!!

ありがとうございます！

新垣さんのような素晴らしい実力を持った方に回答いただき嬉しいです！

早速試してみたいと思います😭