AEM 65 - Extend Asset Finder, add Dynamic Media Scene7 component for Audio and Video


Extend the authoring Asset Finder to show EAEM Audio option in Asset filter dropdown

Extend the Dynamic Media Scene7 component /libs/dam/components/scene7/dynamicmedia and create a new component /apps/eaem-dms7-audio-video-component/eaem-dms7-audio-video-component to play both Audio and Video files (product component is for videos only)

For configuring Dynamic Media Scene7 check this post

Demo | Package Install | Github

Asset Finder extension for Audio

Playing Video


1) To add the EAEM Audio filter in Asset Finder, login to CRXDE Lite, create folder (nt:folder) /apps/eaem-dms7-audio-video-component

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-dms7-audio-video-component/clientlib and set a property categories of String[] type to [cq.authoring.editor.hook.assetfinder]dependencies of type String[] with value lodash

3) Create file ( type nt:file ) /apps/eaem-dms7-audio-video-component/clientlib/js.txt, add the following


4) Create file ( type nt:file ) /apps/eaem-dms7-audio-video-component/clientlib/assetfinder-audio.js, add the following code

(function ($, $document, author) {
    var self = {},
        EAEM_AUDIO = 'EAEM Audio';

    var searchPath = self.searchRoot = "/content/dam",
        imageServlet = '/bin/wcm/contentfinder/asset/view.html',
        itemResourceType = 'cq/gui/components/authoring/assetfinder/asset';

    self.loadAssets = function (query, lowerLimit, upperLimit) {
        var param = {
            '_dc': new Date().getTime(),
            'query': query.concat("order:\"-jcr:content/jcr:lastModified\" "),
            'mimeType': 'audio',
            'itemResourceType': itemResourceType,
            'limit': lowerLimit + ".." + upperLimit,
            '_charset_': 'utf-8'

        return $.ajax({
            type: 'GET',
            dataType: 'html',
            url: Granite.HTTP.externalize(imageServlet) + searchPath,
            data: param

    self.setSearchPath = function (spath) {
        searchPath = spath;

    author.ui.assetFinder.register(EAEM_AUDIO, self);
}(jQuery, jQuery(document),;

5) To support both audio and video in same component extend otb Dynamic Media Scene7 component /libs/dam/components/scene7/dynamicmedia and create component /apps/eaem-dms7-audio-video-component/eaem-dms7-audio-video-component

6) Create node /apps/eaem-dms7-audio-video-component/eaem-dms7-audio-video-component/cq:editConfig of type cq:EditConfig with cq:dropTargets/image@accept=[video/*,audio/*] to support drag and drop of assets of type audio & video onto the component

7) Create use api javascript /apps/eaem-dms7-audio-video-component/eaem-dms7-audio-video-component/audio-video.js, add the following code to read asset specific metadata

use( function(){
    var METADATA_NODE =,
        SCENE7_FODLER = METADATA_NODE + "/metadata/dam:scene7Folder",
        SCENE7_DOMAIN = METADATA_NODE + "/metadata/dam:scene7Domain",
        fileReference = properties['./fileReference'],
        rootNode = currentSession.rootNode,
        mediaInfo = {};

    if(!fileReference) {
        mediaInfo.isAudio = false;

    var assetNode = rootNode.getNode(fileReference.substring(1)),
        publishUrl = getPublishServerURL(assetNode);

    //"publishUrl----------" + publishUrl);

        isAudio: isAudioFile(assetNode),
        assetName: assetNode.getName(),
        s7PublishPath: publishUrl,
        bgImage: assetNode.getPath() + "/jcr:content/renditions/poster.png"

    function isAudioFile(assetNode){
        var META_DC_FORMAT = "jcr:content/metadata/dc:format",
            isAudioFile = false;

        if(assetNode == undefined){
            return isAudioFile;

        if( assetNode.hasProperty(META_DC_FORMAT)) {
            var dcFormat = assetNode.getProperty(META_DC_FORMAT).getString();
            isAudioFile = dcFormat.startsWith("audio");

        return isAudioFile;

    function getPublishServerURL(assetNode) {
        var s7Path = assetNode.getProperty(SCENE7_DOMAIN).getString() + "is/content/"
                        + assetNode.getProperty(SCENE7_FODLER).getString() + assetNode.getName();

        return s7Path;

8) For audio files, the above script assumes a rendition with name poster.png exists for audio files to shows as static background for audio player

9) For audio files, you can either publish the audio assets to play in component (accessed from Scene7 delivery server) or add more logic to read the secure preview server url from dynamic media configuration to play in author AEM and use S7 delivery server url for publish AEM e.g.

              S7 Secure Preview server url (audio not published) -
              S7 Delivery server url (audio published) -

10) Add HTL script /apps/eaem-dms7-audio-video-component/eaem-dms7-audio-video-component/eaem-dms7-audio-video-component.html to play the audio files using <audio> tag and video files using S7 player

    .eaem-dms7-audio-container {
        position: relative;
        text-align: center;

    .eaem-dms7-audio-centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

<div data-sly-use.mediaInfo="audio-video.js" style="padding:10px">
    <h2>This component can play both audio and video</h2>
    <div data-sly-test="${mediaInfo.isAudio}">
        <h2 data-sly-test="${mediaInfo.assetName}">Currently playing audio : ${mediaInfo.assetName}</h2>
        <div class="eaem-dms7-audio-container">
            <img class="eaem-dms7-audio-image" src="${mediaInfo.bgImage}">
            <div class="eaem-dms7-audio-centered">
                <audio class="eaem-dms7-audio-audio" width="100%" height="100%" preload="auto" controls="controls">
                    <source src="${mediaInfo.s7PublishPath}" type="audio/ogg">
    <div data-sly-test="${!mediaInfo.isAudio}" data-sly-use.mediaInfo="dynamicmedia_sly.js">
        <h2 data-sly-test="${mediaInfo.assetName}">Currently playing video : ${mediaInfo.assetName}</h2>
        <div data-sly-include="/libs/dam/components/scene7/dynamicmedia/dynamicmedia.html"></div>

No comments:

Post a Comment