FROM CACHE - jp_header

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

解決済

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

torano
観光客
24 0 3

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

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

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

 

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

 

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

1 件の受理された解決策

NIIGAKI_HYUGA
Shopify Partner
54 24 15

成功

@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

 

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

Freelance Solution Engineer | 新垣
JavaScript Liquid Theme, React Remix App
投稿は参考になりましたか?「いいね!」でお教えください。
解決しない場合、個別に対応も可能ですのでプロフィールからお気軽にメッセージください

元の投稿で解決策を見る

6件の返信6

NIIGAKI_HYUGA
Shopify Partner
54 24 15

成功

@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

 

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

Freelance Solution Engineer | 新垣
JavaScript Liquid Theme, React Remix App
投稿は参考になりましたか?「いいね!」でお教えください。
解決しない場合、個別に対応も可能ですのでプロフィールからお気軽にメッセージください
torano
観光客
24 0 3

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

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

 

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

 

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

 

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

NIIGAKI_HYUGA
Shopify Partner
54 24 15

@torano 様

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

スクリーンショット 2024-01-18 13.25.33.png

 

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

Freelance Solution Engineer | 新垣
JavaScript Liquid Theme, React Remix App
投稿は参考になりましたか?「いいね!」でお教えください。
解決しない場合、個別に対応も可能ですのでプロフィールからお気軽にメッセージください
torano
観光客
24 0 3

ありがとうございます!

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

 

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

NIIGAKI_HYUGA
Shopify Partner
54 24 15

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

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

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

 

Freelance Solution Engineer | 新垣
JavaScript Liquid Theme, React Remix App
投稿は参考になりましたか?「いいね!」でお教えください。
解決しない場合、個別に対応も可能ですのでプロフィールからお気軽にメッセージください
torano
観光客
24 0 3

天才だ...!!!

ありがとうございます!

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

 

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