Articles on: The editor

Audio

You can add audio to a publication in two ways: an Audio element, which is a clickable icon visitors use to play a sound file, and background audio, which starts when a visitor reaches a specific page.


Adding an Audio element


The Audio element places a clickable play icon on your page. To add one:


  1. Click Add in the left bar of the editor.
  2. Select the Specials category.
  3. Drag Audio onto the canvas.
  4. With the element selected, go to the "Audio" section on the Settings tab of the right panel.
  5. Under "Audio", click Choose an audio file and pick or upload your audio file. MP3 is recommended, because it plays in the widest range of browsers.
  6. Optional: under "Start icon", click Choose start icon to pick the image visitors click to start the audio.
  7. Optional: under "Stop icon", click Choose stop icon to pick the image shown while the audio plays.


How the Audio element plays


On the published page, the Audio element works like this:


  • A visitor clicks the start icon to play the audio.
  • While the audio plays, the stop icon is shown. Clicking it stops the audio.
  • The next time the visitor plays it, the audio starts again from the beginning.
  • If you don't choose a start icon, Maglr shows its default play icon. If you don't choose a stop icon, it shows its default pause icon.
  • While the Audio element plays, any background audio on the page is muted.


Adding background audio to a page


Background audio is a sound file that starts when a visitor reaches a page. It plays only in the page's desktop layout, and some browsers keep it muted until the visitor clicks the sound button. You set it per page:


  1. Click Pages in the left bar of the editor.
  2. Click the wrench icon next to the page you want to add audio to.
  3. In the "Settings" drawer, go to "Audio" and click Choose a file under "Background audio".
  4. Pick or upload an MP3, WebM or OGG file. Files in other formats don't play as background audio.
  5. Click Save at the top of the "Settings" drawer. The Save button appears once you've made a change.


Image: adding background audio to a page in the editor


How background audio plays


On the published page, a page's background audio works like this:


  • It starts when the visitor reaches the page, fades in, and loops.
  • It stops when the visitor moves to a page without background audio. If the next page uses the same file, it keeps playing without restarting.
  • It only plays when the page is shown in its desktop layout. When the page is shown in its mobile layout, such as on a phone held upright, background audio doesn't start.
  • Many browsers block sound until the visitor interacts with the page. In that case, a tooltip appears on the sound button in the navigation bar, and the audio stays muted until the visitor clicks that button.
  • Visitors can mute and unmute background audio with the sound button in the navigation bar.
  • It is muted while an Audio element or a video on the page plays, and comes back when that stops.


Frequently asked questions


Why doesn't background audio play on my phone?


Background audio only plays when a page is shown in its desktop layout. Phones held upright and other narrow screens show the mobile layout, so background audio doesn't start there. A phone turned to landscape usually shows the desktop layout, and then background audio plays.


Why doesn't background audio start automatically?


Many browsers block sound on a web page until the visitor interacts with it. When that happens, a tooltip appears on the sound button in the navigation bar of your publication, and the background audio stays muted until the visitor clicks that button.


Which audio file formats can I use?


For background audio on a page, use an MP3, WebM or OGG file; files in other formats don't play. For the Audio element, MP3 is recommended, because it plays in the widest range of browsers.


Can a button start or stop an Audio element?


Yes. Another element, such as a button, can control an Audio element through the "Control element" link, with the actions "Play" and "Pause". "Pause" stops the audio, so the next time it plays, it starts again from the beginning.

Updated on: 29/10/2026