Liquid, JavaScript, themes, sales channels
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!
Solved! Go to the solution
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
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
This worked like a charm. Thank you!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024