Audio in a paragraph

⚠️ Since the Summernote Editor creates only inline elements, you'll probably create the paragraph first and then put the video player in it.

<p class="col s12 m6 l4 xl3">
  <audio playsinline controls preload="auto">
    <source src="http(s)://your-wonder-cms-website-address/data/files/your-audio-file.mp3" type="audio/mpeg">
  </audio>
</p>

Example

⚠️ If you want to see how the grid reacts, grab the right edge of the browser window with your mouse and make the window narrower or wider to simulate a change in screen resolution.

Below you can see the table created using the code above.

The audio file

To use the audio player, you must first upload an MP3 or OGG audio file to your Wonder CMS website:

1. Click "Settings" and then click the "Files" tab.
2. Click the "Select File" button and select the file you want to upload
3. Click "Upload".
4. Click "Settings" again, and then click the "Files" tab.
5. In the list of files you should find the file you uploaded.
6. Use the link of the file to code the audio player
   
   

CSS classes

Audio in text paragraph can be given CSS classes:

• Grid classes for the paragraph (as in the example above)
  
  

Summernote Editor (also Lite version)

That kind of content as the Youtube video can be placed on the page only using the Code View tool. Moreover, paragraphs containing audio can be given placement using the Paragraph tool.