# MP3 player for website?

**URL:** <https://forum.pinegrow.com/t/mp3-player-for-website/1886>\
**Category:** Beginners\
**Created:** [May 14, 2018, 1:29pm UTC](https://forum.pinegrow.com/t/mp3-player-for-website/1886 "2018-05-14T13:29:09Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![ladlon](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/ladlon/32/928_2.png) [@ladlon](https://forum.pinegrow.com/u/ladlon)\
**Post date:** [May 14, 2018, 1:29pm UTC](https://forum.pinegrow.com/t/mp3-player-for-website/1886/1 "2018-05-14T13:29:09Z")

</div>

Hi. I’m building my new website using Pinegrow, and am wondering if there is some sort of MP3 player module/block available, allowing visitors to play sample clips of my music. Nothing fancy… just something with a play/stop button for each clip (…either a separate player for each clip, or a single player with a playlist you can jump through… simpler is better).

In my previous site, I was using a swf-based player I found online, but that was years ago, and I’m not sure if there is now something better or better compatible with today’s setups.

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [May 14, 2018, 4:28pm UTC](https://forum.pinegrow.com/t/mp3-player-for-website/1886/2 "2018-05-14T16:28:39Z")

</div>

Have a look at this:

> **[Video and audio content](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)**
>
> And that's a wrap; we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like iframe and object.

> **[\<audio\>: The Embed Audio element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio)**
>
> The HTML audio element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the source element: the browser will choose the most suitable one. It can also be the destination for...

---

<div class="post-metadata">

**Author:** ![ladlon](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/ladlon/32/928_2.png) [@ladlon](https://forum.pinegrow.com/u/ladlon)\
**Post date:** [May 14, 2018, 5:53pm UTC](https://forum.pinegrow.com/t/mp3-player-for-website/1886/3 "2018-05-14T17:53:10Z")

</div>

Thanks for the reply, Earnoud.

Yeech… I was hoping I wouldn’t have to resort to HTML5 video/audio tags. I was really let down when I learned about them. Initially, it seemed so clean and simple… just a clean video/audio tag… until I read up on all the support code/files that had to accompany it. Suddenly, not so simple…

Embedding video was one of the main things that finally made me quit doing websites… such a pain (…I’m looking at YOU, Internet Explorer…).

I was hoping someone had made a contemporary audio player block I could just drop in, and not have to make 3 separate formats for each clip. Really sad to see this still hasn’t been unified to one format.

Well, if I have to, I guess I’ll have to create the auxillery formats… (…Dry heave…)

---

<div class="post-metadata">

**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\
**Post date:** [May 15, 2018, 10:16pm UTC](https://forum.pinegrow.com/t/mp3-player-for-website/1886/4 "2018-05-15T22:16:07Z")

</div>

You don’t _have_ to make three separate formats for each clip. Virtually all modern browsers support the .mp3 format with the HTML5 player. It’s really very simple. There are no support files or code needed. Embedding a clip is as simple as…

[https://www.w3schools.com/tags/tag\_source.asp](https://www.w3schools.com/tags/tag_source.asp)

---

<div class="post-metadata">

**Author:** ![ladlon](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/ladlon/32/928_2.png) [@ladlon](https://forum.pinegrow.com/u/ladlon)\
**Post date:** [May 15, 2018, 10:36pm UTC](https://forum.pinegrow.com/t/mp3-player-for-website/1886/5 "2018-05-15T22:36:18Z")

</div>

Hi, Printninja… Ya, I checked out the current compatibility chart for mp3 and the audio tag, and it’s looking pretty good. Finally!

I suppose I could just use the audio tag, with the Controls set to true, and that should give me what I need. I’ll have to check that out.

Thanks guys.

---

<div class="post-metadata">

**Author:** ![Bio-Designer](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/bio-designer/32/541_2.png) [@Bio-Designer](https://forum.pinegrow.com/u/Bio-Designer)\
**Post date:** [May 19, 2018, 3:58pm UTC](https://forum.pinegrow.com/t/mp3-player-for-website/1886/6 "2018-05-19T15:58:29Z")

</div>

Ajax/xml loaded audio player is very neat because people can visit your pages without interrupting audio stream.

You can get how it’s done in rascal template/theme :

> **[Meloo - Continuous Music Playback HTML Template](https://themeforest.net/item/meloo-continuous-music-playback-html-template/21226962)**
>
> Let your Music shine at the highest level with Meloo Template featuring a responsive
> design, continuous music playback, event integration & SCAMP music player.
> 
> Meloo is a fully responsive, single ...

or checking google to find some hints …

---

<div class="post-metadata">

**Author:** ![ladlon](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/ladlon/32/928_2.png) [@ladlon](https://forum.pinegrow.com/u/ladlon)\
**Post date:** [September 26, 2018, 10:23pm UTC](https://forum.pinegrow.com/t/mp3-player-for-website/1886/7 "2018-09-26T22:23:34Z")

</div>

Thanks for that, but I’m after something where the user selects from a list of songs (rather than it continuously playing). It’s for the Music section of my portfolio.

---

<div class="post-metadata">

**Author:** ![svsmailus](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/svsmailus/32/4584_2.png) [@svsmailus](https://forum.pinegrow.com/u/svsmailus)\
**Post date:** [November 4, 2022, 12:26pm UTC](https://forum.pinegrow.com/t/mp3-player-for-website/1886/8 "2022-11-04T12:26:19Z")

</div>

Can I ask what you settled on? I’m looking for a similar solution.

---

<div class="post-metadata">

**Author:** ![KvG](https://avatars.discourse-cdn.com/v4/letter/k/c68b51/32.png) [@KvG](https://forum.pinegrow.com/u/KvG)\
**Post date:** [December 4, 2022, 7:02pm UTC](https://forum.pinegrow.com/t/mp3-player-for-website/1886/9 "2022-12-04T19:02:30Z")

</div>

Maybe this is what you are looking for. A free Bootstrap 4 audio player with playlist on [https://www.jqueryscript.net/other/Bootstrap-Audio-Player-Playlist-jQuery.html](https://www.jqueryscript.net/other/Bootstrap-Audio-Player-Playlist-jQuery.html). There is however a small glitch in the html-code; see my other post on this forum.
