Forum Discussion

pratikdarak21's avatar
pratikdarak21
Brass Contributor
Dec 20, 2022

Is there anyway to Add Audio file Modern SharePoint Online page with thumbnail associated to it ?

Hi,

 

Is there anyway to Add Audio file (.MP3) to Modern SharePoint Online page with thumbnail associated to it ?

 

Note - While playing audio all controls should appear like (volume up/down, backward, forward, etc)

 

Regards,

Pratik

 

SharePoint Online
  • RobElliott's avatar
    RobElliott
    Silver Contributor
    Dec 29, 2022

    pratikdarak21 there are a couple of ways to do this.

    1) multiple audio files.

    If you want to display multiple audio files create a new document library and upload them there. Edit the view and select the Title column to display in the view. Then create a new view (I usually call this JSON) and I format that view with an audio logo using the following JSON in advanced mode:

    Spoiler
    {
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
    "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
    "hideColumnHeader": true,
    "rowFormatter": {
    "elmType": "div",
    "attributes": {
    "class": "ms-fontColor-neutralDark ms-fontColor-themePrimary--hover"
    },
    "style": {
    "font-size": "18px",
    "height": "100%"
    },
    "children": [
    {
    "elmType": "img",
    "style": {
    "width": "30px",
    "height": "30px"
    },
    "attributes": {
    "src": "link to logo"
    }
    },
    {
    "elmType": "span",
    "txtContent": "[$Title]",
    "style": {
    "padding-left": "8px"
    }
    }
    ]
    }
    }

    Then add a Document Library web part to your page and change the settings to point to your library and the JSON view:

     

    When the user double-clicks on the audio they want to listen to it will open in a new tab and play the file using Stream with the controls there:

     

     

    2) Another way to do this which we use if we only want to display a single audio file with a related image is to build a quick & simple Power App and add an audio control and upload the mp3 directly into the app. Then you can add a Microsoft Power Apps web part to your page.

     

    You can see both of these approaches playing on the attached video.

     

    Rob
    Los Gallardos
    Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

     

Resources