--- title: How to use the Audio Player widget? description: The Audio Player widget lets you upload and play audio files directly on your site. Customize playback controls and styling for a seamless listening experience. --- [Skip to content](https://success.ministrydesigns.help/how-to-use-the-audio-player-widget#main-content) English Show submenu for translations [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) [![MD Logo 1\_Black-2](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-2.png?width=200&height=73&name=MD%20Logo%201_Black-2.png)](https://ministrydesigns.com/) Open main navigation Close main navigation - English Show submenu for translations - [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) How can we help you? - There are no suggestions because the search field is empty. 1. [Ministry Designs Success Hub](https://success.ministrydesigns.help/) 2. [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega) 3. [Pages](https://success.ministrydesigns.help/sites-formerly-omega#pages) # How to use the Audio Player widget? ## Play self-hosted audio files on your website 1\. The Audio Player widget allows you to upload .mp3 files to the website. Drag and drop the Audio Player widget onto the page ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2025-03-09/d9bdb56f-592f-4894-b7f9-050ef47af493/ascreenshot.jpeg?tl_px=0,172&br_px=860,653&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=193,212) 2\. Select the Audio Player widget to edit the settings described further ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-17/b14f4e89-58b0-42c3-9393-33a466a2722d/ascreenshot.jpeg?tl_px=299,292&br_px=1159,773&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,212) 3\. Click "Add" to add the .mp3 file ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-17/3287a3e6-6e35-46b6-9027-b2a76ba11dba/ascreenshot.jpeg?tl_px=595,22&br_px=1455,503&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=699,212) 4\. Click "+" icon to include the file you want to add ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-17/328a3b6f-af4e-4cb9-8e89-1bc93e43b2a5/ascreenshot.jpeg?tl_px=180,0&br_px=1163,549&force_format=jpeg&q=100&width=983&wat_scale=87&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=768,81) 5\. Select the required .mp3 file ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-17/4d519f90-0f7b-4dc9-9d91-7dd5c7c37ac5/ascreenshot.jpeg?tl_px=47,0&br_px=907,480&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=402,155) 6\. Click "Apply" to confirm the changes ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-17/1376a480-88dc-4e22-ad73-3726c5c77933/ascreenshot.jpeg?tl_px=0,191&br_px=1376,961&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=518,452) 7\. Specify the title for the file ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-17/6425cd8f-f47d-465b-9e78-b488d3bfa93c/ascreenshot.jpeg?tl_px=291,13&br_px=1151,494&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=176,213) 8\. Specify the artist's name for the file ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-17/b21468ee-af96-479a-8538-22ee12a1b44a/ascreenshot.jpeg?tl_px=289,11&br_px=1149,492&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=181,313) 9\. Click "Save" to confirm the changes ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-17/2abdb634-aa4e-4e92-bd2c-8419a9c768de/ascreenshot.jpeg?tl_px=261,9&br_px=1121,489&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=379,390) 10\. Enable the loop with the "Loop" checkbox so the audio file is played constantly when it reaches the end ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-17/98da88c5-35e6-4148-b04d-7dfb5e6b529a/ascreenshot.jpeg?tl_px=595,124&br_px=1455,605&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=581,212) 11\. Enable autoplay with the "Autoplay" checkbox so the audio file plays automatically from the beginning ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-17/93e0c9ed-19b4-4478-94fa-39e822d0ecf0/ascreenshot.jpeg?tl_px=595,169&br_px=1455,650&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=574,212) 12\. Enable forced start with the "Forced Start" checkbox. A forced start stops another previously launched widget playback ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-17/298a94e8-6d07-4f8c-b560-bd558ba5d00a/ascreenshot.jpeg?tl_px=595,200&br_px=1455,681&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=579,212) 13\. Enable only when visible with the "Only When Visible" checkbox. If enabled, autoplay will run only when the widget is in the visible area of the screen ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-17/18470be2-fe53-4ec5-ab2d-bde479242e25/ascreenshot.jpeg?tl_px=595,234&br_px=1455,715&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=577,212) 14\. Enable the stop button with the "Show Stop Button". The visitors will be able to stop the audio file, and if it's played again, it will play from the very beginning ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-17/3795dfe8-95e4-4cf6-b1d5-282f101fb510/ascreenshot.jpeg?tl_px=990,270&br_px=1850,751&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=583,212) 15\. This is how it will look on the preview ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-17/73176bcc-8cb9-46a1-b386-405419d22b28/ascreenshot.jpeg?tl_px=0,293&br_px=859,774&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=369,212) 16\. Enable the loop button with the "Show Loop Button". The visitors will be able to manually loop the audio file, provided the loop checkbox is disabled ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-17/b5644126-5161-4bce-9435-182860760479/ascreenshot.jpeg?tl_px=990,306&br_px=1850,787&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=584,212) 17\. This is how it will look on the preview ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-17/815bee5d-a33c-4777-a838-b1ad9d133392/ascreenshot.jpeg?tl_px=990,298&br_px=1850,779&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=468,212) 18\. Enable the download button with the "Show Download Button" checkbox ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-17/868a1782-df78-4f31-ad40-60be473d5bd1/ascreenshot.jpeg?tl_px=990,334&br_px=1850,815&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=579,212) 19\. This is how it will look on the preview. The visitors will be able to download the audio file ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-17/ec43ff58-3213-45d0-ab19-757a48288d2f/ascreenshot.jpeg?tl_px=990,291&br_px=1850,772&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=463,212) 20\. Click "Save" to confirm the changes ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-06-17/1cd9d549-b76f-4292-9bc9-0b4fe3d1519c/ascreenshot.jpeg?tl_px=990,0&br_px=1850,480&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=783,63) The remaining features here - Spacing and Animation are common in most widgets in the website builder. Please refer to [this guide](https://success.ministrydesigns.help/what-are-the-shared-features-in-the-website-builder) for more information on these features - [Account](https://success.ministrydesigns.help/account) - [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega#main-content) - [Next-Steps Framework](https://success.ministrydesigns.help/sites-formerly-omega#next-steps-framework) - [Video Guides](https://success.ministrydesigns.help/sites-formerly-omega#video-guides) - [Site Builder Profile Settings](https://success.ministrydesigns.help/sites-formerly-omega#site-builder-profile-settings) - [Pages](https://success.ministrydesigns.help/sites-formerly-omega#pages) - [Design](https://success.ministrydesigns.help/sites-formerly-omega#design) - [Media Library](https://success.ministrydesigns.help/sites-formerly-omega#media-library) - [Extensions](https://success.ministrydesigns.help/sites-formerly-omega#extensions) - [Blog](https://success.ministrydesigns.help/sites-formerly-omega#blog) - [Events](https://success.ministrydesigns.help/sites-formerly-omega#events) - [Small Groups](https://success.ministrydesigns.help/sites-formerly-omega#small-groups) - [Sermons](https://success.ministrydesigns.help/sites-formerly-omega#sermons) - [Settings](https://success.ministrydesigns.help/sites-formerly-omega#settings) - [SEO](https://success.ministrydesigns.help/sites-formerly-omega#seo) - [Website Management](https://success.ministrydesigns.help/sites-formerly-omega#website-management) - [FAQ](https://success.ministrydesigns.help/sites-formerly-omega#faq) - [illume for Church Members](https://success.ministrydesigns.help/illume-for-church-members#main-content) - [Signing Up](https://success.ministrydesigns.help/illume-for-church-members#signing-up) - [Giving](https://success.ministrydesigns.help/illume-for-church-members#giving) - [illume for Church Administration](https://success.ministrydesigns.help/illume-for-church-administration#main-content) - [Getting Started](https://success.ministrydesigns.help/illume-for-church-administration#getting-started) - [Managing Your Account](https://success.ministrydesigns.help/illume-for-church-administration#managing-your-account) - [Using People](https://success.ministrydesigns.help/illume-for-church-administration#using-people) - [Using Giving](https://success.ministrydesigns.help/illume-for-church-administration#using-giving) [![MD Logo 1\_Black-3](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-3.png?width=200&height=73&name=MD%20Logo%201_Black-3.png "MD Logo 1_Black-3")](http://ministrydesigns.com) 15 Carlyle St Floor 2, Battle Creek, Mi 49017 [mailto:email@email.com](mailto:email@email.com) Copyright © 2025,