Shopify-DAWN: Audioplayer programmieren

Develop your own audio player for Shopify DAWN

Beispielcode für einen Shopify-Audioplayer.

Sample code for a Shopify audio player.

Beitrag von / Written by: STEFAN

Hier findest du ein Beispiel für einen Shopify-Audioplayer. Du kannst mehrere Player auf einer Seite integrieren. Beachte die Anweisungen um bereits laufende Player zu stoppen, sobald du einen anderen startest.

Here's an example Shopify audio player. You can integrate multiple players on one page. Follow the instructions to stop already running players as soon as you start another one.

First you need at least three different images for the player. Play, pause and back (set to start). Upload the pictures to Shopify under Settings/Files. Note: These images are under license. Please use your own pictures. Click here for examples.

You also need one or more audio files as MP3. Upload as well on Shopify Settings/Files.

Audio-Player picture examples:

  • Play

  • Pause

  • Rewind

Before using the code below, see the player in action. (Voices of the audio examples are generated by artificial intelligence):

This is player one. Listen to example.

This is player two. Listen to example.

Get started:


In the above examples, the same graphics are used for play, pause and back on mouse-over. You can change this by building more graphics and adjusting the mouseover lines of code accordingly.