Are you looking for a simple way how to embed MP3 player on Webnode site?
In this tutorial I will show you three easy ways (free of charge).
1. The first way is to use the function directly in the Webnode editor. Click “+” and “File“.
- Mp3 will start in a separate cart.
- Mp3 can be freely inserted into the server space limit. Free version of Webnode is 100 MB.
2. The second option is the use of an external service (HTML code). We will use Powr.io,
where you can freely generate MP3 music player for 3 songs. Adding additional mp3s is already charged by buying a premium account.
1. Click on “Try It now FREE“.
2. Register
3. click here – (it will redirect you to music player creator).
4. Click on “Create your own“.
5. You can remove the demo and upload your own songs using the Upload Mp3 button. The limit for a free version file is 5 MB.
TIP: You can change the colors and overall appearance of the player in the “Design” box.
6. If you are satisfied with your player, click “Add to site” at the top of the screen.
7. Choose “FREE” plan for 3 songs clicking on “Select plan“.
8. Copy the HTML code of your mp3 player and paste it into the Webnode web site using the + and HTML code funcion.
Preview of mp3 player (also contains ad 🙁
3. The third option and i highly recommend to use, is the great Sound Cloud service.
Instructions for inserting the MP3 player from SoundCloud to Webnode
1. Register here: https://soundcloud.com/
2. In the top bar, click “Upload” and upload your songs.
3. After uploading the songs, click “Stream” in the top bar and then “Share” next to your playlist.
4. click “Embed” and you can also edit the color of the player and copy the code.
5. You can paste the mp3 player code from SoundCloud on Webnode using the “+” and “HTML” buttons.
6. Publish changes. You can see the player from SoundCloud in the published version of your site.
Preview of free mp3 player – SoundCloud
More awesome tutorials
Webnode Review: How to create a website/e-shop for free (Webnode review 2023 +SEO TIPS)
Have you ever wanted to create your own website from scratch? Do you want to create a website or e-shop and make it visible on the Internet? Get started right now and learn how to easily create your first custom website.Creating a website with Webnode is so simple...
How to add a playlist or album from Spotify to the Webnode website?
In the tutorial "3 easy ways to embed an online MP3 player on the web", I showed you very simple way to embed a music player on your Webnode website. Let's take a look at your other options together.Do you LIKE Spotify?Simply embed your Spotify playlist / album to...
How to redirect “Continue shopping” button in cart in Webnode e-shop to OWN URL?
Would you like to set a specific URL in your Webnode e-shop for the "Continue shopping" button in your cart?In the Webnode e-shop editor, the "Continue shopping" button in the cart is predefined to redirect the visitor of your e-shop to the last visited page. Webnode...
How to add a top bar to WEBNODE website (with contact information and social icons)
You can easily add top bar with contact information, social networks icons or a currency switcher (in the e-shop) or a website language switcher (flags).In our Webnode Free News i was talking about 5 new features of the NEW Premium Business Package and 6 best WEBNODE...
How to rename “Add to cart” button in Webnode e-shop?
Would you like to rename the "Add to cart" button in Webnode?In tutorial "How to rename" CART in the menu in the WEBNODE e-shop?" i showed u how to rename CART in the menu. Let's take a look at your other options. Webnode for e-shops is a great choice for your online...
How to set up your own font in Webnode using Google Fonts library?
VideotutorialWould you like to change the font in Webnode to one of the Google Fonts? Few words at the beginningWebnode enables you to change the font on your website under section: “Settings” – “Design” – “Fonts”. Of course, Webnode editor offers the most used...
How to add social icons into footer in Webnode CMS?
Would you like to add social icons like Facebook, Instagram, YouTube etc. to the FOOTER of your WEBNODE website?Social networks like Facebook or Instagram are popular topics on my website. I wrote these tutorials: How do I easily link my Facebook to my website...
How to add a snowflake animation to the Webnode site? Falling snow html code
Would you like to improve your Webnode site by animating the falling snow? No problem! In this tutorial, I'll show you how to add falling online snow to your site. Simple and free. Read more! #Let's go! 1. Log in to editing the Webnode site and paste the HTML code...
How to add a searchbox in Webnode website or e-shop?
Would you like a searchbox (searchbar) on your e-shop/website from WEBNODE?Are you looking for a simple and stylish search box that you can put on your website or e-shop in Webnode?Video-tutorialVideotutorial is only in Slovak language.In tutorial How to add a custom...
How to rename “Cart” in the menu in WEBNODE e-shop?
Would you like to rename the cart in the e-shop in Webnode from "CART" to "My Cart"? With my simple tutorial, you will definitely be able to do it. Just subscribe to my newsletter - William Promotions News - and get the pre-prepared code. In the code, you can...
How to add pencil animation (type&swipe) to a website/eshop in WEBNODE?
Do you want to attract your audience? Would you like to improve your website? I have created a code for you that will allow you to display an animation of a writing pencil on your website or e-shop in WEBNODE. You can choose your own text in the code so...
How to add FAQ bookmarks to your website/e-shop in Webnode?
Would you like to add a FAQ bookmarks to the WEBNODE website or e-shop?In tutorial How to show and hide text after clicking the "More text" button? I showed you an easy way to hide text on the web. In this tutorial, I will show you how to use my code to create your...