Product:

Wonder Audio Player

Tutorial:

You can use the Wonder Audio Player plugin to create a single button WordPress Audio Player, and you may want to display the audio player and text in one line.

This seems like an easy task, but in fact, it's quite difficult. The reason is that text is normally added to the webpage as a paragraph <P></P>, whereas the audio players are rendered as DIV blocks <DIV></DIV>, and a paragraph cannot contain block-level elements. If you simply add them to one line, they will break into multiple lines on the front page.

To display them in one line, you can add an HTML table to the page, then add the players and text to one row.

If you don't like tables, you can add them to a DIV, then use CSS code to arrange the players and the text in a Flexbox layout.

When creating the player in Wonder Audio Player, in step 3 Options tab, Advanced Options, add the following text to the Custom CSS input box:

#wonderpluginaudio-AUDIOPLAYERID {
  margin: 8px !important;
}

Then you add the player shortcode and the text to your WordPress page or post editor. The demo HTML code is as follows:

<div style="display:flex;flex-direction:row;justify-content:center;align-items:center;">
Listen to Audio Player 1 [[wonderplugin_audio id="71"]] and Audio Player 2 [[wonderplugin_audio id="72"]]
</div>

display:flex; defines the container DIV as Flexbox layout. flex-direction:row; arranges the child contents in a row. justify-content:center; aligns the whole content in the center of the page. align-items:center; speficies the vertical alignment.

You can directly add the HTML code, or if you are using a page editor, you can change the CSS properties of the container DIV as the code.

The online demo is as follows:

If you want to align the whole text to the left of the webpage, you can change the CSS property justify-content to start.