Forum Discussion
Is there anyway to Add Audio file Modern SharePoint Online page with thumbnail associated to it ?
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:
"$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)
- Thank you Rob for your response !
