Audio player on product page

Solved
ProducerHaven
New Member
2 0 0

Hello!

 

I recently added an audio player on my product page using wavesurfer which draws a waveform based on the audio. This works like a charm, you can see it in action here (bottom of the product page).

I added the following code to the product-template.liquid:

 

input[type=button]{
  
  background-color: #606060;
  border: none;
  color: white;
  width: 100%;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  

</style>
      
  <input type="button" id="btn-play" value="▶" disabled="disabled"/>
  <script src="{{ 'wavesurfer.js' | asset_url }}"></script>
 
      
      <script>
            var buttons = {
                play: document.getElementById("btn-play"),
            };

            var Spectrum = WaveSurfer.create({
                container: '#audio-spectrum',
                progressColor: "#03a9f4"
            });

            buttons.play.addEventListener("click", function(){
                Spectrum.playPause();
              
              if (this.value=="▶") this.value = "II";
    			else this.value = "▶";
              
            }, false);


            Spectrum.on('ready', function () {
                buttons.play.disabled = false;
            });

            Spectrum.load('{{ 'EDM_Essentials_Vol.1_Demo.mp3' | asset_url }}');
        </script>

      
        {% if section.settings.show_share_buttons %}
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}
        {% endif %}
    </div>
  </div>
</div>

 So now it draws a waveform and has a play/pause button but the problem is that if I were to add a new product it would use the same demo song. What I want is to use a different audio file for all my products.

 

Any help on how I should go about this is appreciated so thanks in advance!

Accepted Solution (1)

Accepted Solutions
VITIX-DEV
Tourist
5 1 2

This is an accepted solution.

Hello

If you want to use the different audio for different products so you need to use the metafield .

You can use any free metafield app like Metafield guru etc .

Steps for using the metafield

You need to go to Settings  then Files and upload the audio and copy the URL .

Create a Metafield for product.

You need to go the product template file (where you putted the audio player code ) and replace only audio source with metafield source code 

Still you need any issue please contact to contactvitix@gmail.com

Thank you 

VITIX Dev 

View solution in original post

Replies 2 (2)
VITIX-DEV
Tourist
5 1 2

This is an accepted solution.

Hello

If you want to use the different audio for different products so you need to use the metafield .

You can use any free metafield app like Metafield guru etc .

Steps for using the metafield

You need to go to Settings  then Files and upload the audio and copy the URL .

Create a Metafield for product.

You need to go the product template file (where you putted the audio player code ) and replace only audio source with metafield source code 

Still you need any issue please contact to contactvitix@gmail.com

Thank you 

VITIX Dev 

View solution in original post

ProducerHaven
New Member
2 0 0

This worked like a charm. Thank you!