In order to embed an audio element on a Wix Blog post (like this one) you will have to host your audio source on a compatible platform online. (SoundCloud is not a compatible source.)
Hosting audio on Publitio
The following audio file is hosted on the Publit.io platform where they offer a free plan and a premium for less than $10 per month.
Sample music audio file:
Generic HTML code:
[Warning: This method allows users to hover and right-click audio player to download file.]
<audio controls>
<source src="https://media.totallycodeable.com/file/file_example_MP3_700KB-G.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Notice that the blue URL is the source of the audio that is being hosted on the Publit.io platform.
Within the Wix Blog editor click on the plus sign to add HTML code. Paste the sample code above and simply replace the sample audio source URL with your own.
Publit.io also has their own players that you can use to embed the audio almost anywhere. The players remove the ability to right click and download audio file. But they also remove the tradition audio player 'look' and ends up looking more like a video placeholder.
Sample code for this Publit.io iframe player:
[Warning: In order to prevent right clicking to download the file, you must configure this setting in your Publit.io player settings.]
<div><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><figure style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%; margin-block-end: 0; margin-block-start: 0; margin-inline-start: 0; margin-inline-end: 0;" ><iframe id="pv_G2kZaj68" src="https://media.totallycodeable.com/file/file_example_MP3_700KB-G.html?player=none" scrolling="no" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute; overflow:hidden;" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" ></iframe></figure></div></div>
Publit.io offers a secondary player called the source player. As you can see, it looks identical to the HTML player code at the beginning of this tutorial.
Sample code for this Publit.io source player:
[Warning: In order to prevent right clicking to download the file, you must configure this setting in your Publit.io player settings.]
<audio oncontextmenu="return false;" controlslist="nodownload" controls="" ><source src="https://media.totallycodeable.com/file/file_example_MP3_700KB-G.mp3" type="audio/mpeg"><source src="https://media.totallycodeable.com/file/file_example_MP3_700KB-G.wav" type="audio/wav"><source src="https://media.totallycodeable.com/file/file_example_MP3_700KB-G.ogg" type="audio/ogg"></audio>
And the last player that Publit.io offers is the link player. It looks similar to the their first player but it is simply a special URL link to the hosted file on the platform specifically for audio.
Sample link Publit.io source player:
[Warning: In order to prevent right clicking to download the file, you must configure this setting in your Publit.io player settings.]
https://media.totallycodeable.com/file/file_example_MP3_700KB-G.html?player=none
If you use this last method on Wix then you would use still select the HTML widget from the blog settings but you would use the website address method instead of the HMTL code method.
Hosting audio on Wix
The same audio sample was uploaded into Wix by using the Wix media manager. Feel free to right click on this audio player to download the sample audio file so you can try out the tutorial yourself!
HMTL code:
[Warning: This method allows users to hover and right-click audio player to download file. Wix does not offer to disable downloads via any settings.]
<audio controls>
<source src="https://static.wixstatic.com/mp3/d92e1f_bed42cc0a59140778c6a39b9ca07fc0f.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Wix may have file size limits or could possibly change the way files are stored in the future. But if you want to try to host your audio files in your site's Wix Media manager then feel free to try it out!
Simply click the blue upload media button on the top left corner to select the audio file you want to upload. Once the file finishes importing click on the three dots to view the file options. Select on copy URL to obtain the source for your audio. Now you copy and paste your HTML code with the updated source URL.
Embed on any site
You can use the sample code to embed an audio player in almost any platform that allows iFrame or HTML embeds. All you have to do is repeat the steps mentioned above.