Use the Audio widget to put a music player on a page. Visitors click play to hear an MP3 file that's published with your website. Web browsers don't let sound start by itself, so plan for visitors to press play. For podcasts or a large music collection, a player from an audio service such as SoundCloud or Spotify saves your hosting space and bandwidth.
Add the Audio widget
- Open the page, click the Widgets tab and drag Audio onto the page.
- Go to Inspector > Widget Settings and choose your file in MP3 File. EverWeb copies it into your project's Assets list.
- Set Default Volume Level (0 to 10, normally 5). Leave Mute sound unticked.
- Tick Audio loop if the track should start again when it ends.
- Add a text box above the player with the song or episode name. The player shows no title.
- Click Preview and press play. Sound doesn't play in EverWeb's editing window.
- Publish.
The player is a slim bar, 300 by 40 pixels to start with. You can make it wider, or tick Full width in Inspector > Metrics on a responsive page. If you put several players on a page, starting one pauses the others.
Use MP3 files
The Audio widget plays MP3 files. Convert WAV, AIFF or M4A files to MP3 first, for example in the Music app on a Mac or with an audio converter. Standard quality (128 kbps) is about 1 MB per minute: a 4-minute song is about 4 MB and an hour-long episode about 60 MB.
Why the music doesn't start by itself
The Auto play audio on page load setting asks the browser to start the music. Safari, Chrome, Firefox and phones block sound until the visitor has clicked or tapped on the page, so autoplay usually doesn't happen. This is a browser rule, and no setting or code can get around it. Music also stops when the visitor opens another page.
Storage and bandwidth
- Every MP3 is stored in your project file and on your website. With EverWeb + Hosting, it uses your plan's storage, which is shared by your website and all your email.
- Each time someone plays a file, they download it, which uses bandwidth. Your website can have unlimited visitors, as long as they don't use up your account's bandwidth. See Bandwidth Limit Exceeded: why my site is offline and what to do.
- Many players on one page make it slow to open. Spread them over several pages.
- To swap a track everywhere it's used, use Replace Asset... in the Assets list. See Replace an image or PDF everywhere at once, and clear out files you no longer use (the Assets list).
Podcasts and music services
Podcast hosts, SoundCloud, Spotify and Apple Podcasts give you a player to embed. Look for Share and then Embed, copy the code, and paste it into an HTML Snippet widget. Their servers send the audio, so it doesn't use your storage or bandwidth, and new episodes can appear without you publishing again. See Add a booking calendar, Instagram feed or other outside code with the HTML Snippet widget. We can't support code from other companies, so ask the service if its player doesn't work.
Common problems
| What you see | What to do |
|---|---|
| Play does nothing in EverWeb | That's expected. Test in Preview or on your published website |
| No sound on your website | Check Mute sound is unticked and the volume isn't 0, and that the file is an MP3. Then publish and test in a private browser window |
| You want a picture or button to start the music | Visitors need to use the player's own play button. A separate picture can't start it |
| The page takes a long time to load | Use fewer players per page, or an audio service's player |
Video guide: The Audio widget.
Related articles
- How do I add a video, a background video or music to my EverWeb website?
- Bandwidth Limit Exceeded: why my site is offline and what to do
- My hosting is full. What is using my space and how do I clear it? (Error 55)
- Replace an image or PDF everywhere at once, and clear out files you no longer use (the Assets list)