Recherche avancée
Médias (39)
-
Stereo master soundtrack
17 octobre 2011, par
Mis à jour : Octobre 2011
Langue : English
Type : Audio
-
ED-ME-5 1-DVD
11 octobre 2011, par
Mis à jour : Octobre 2011
Langue : English
Type : Audio
-
1,000,000
27 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
-
Demon Seed
26 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
-
The Four of Us are Dying
26 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
-
Corona Radiata
26 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
Autres articles (71)
-
Des sites réalisés avec MediaSPIP
2 mai 2011, parCette page présente quelques-uns des sites fonctionnant sous MediaSPIP.
Vous pouvez bien entendu ajouter le votre grâce au formulaire en bas de page. -
Publier sur MédiaSpip
13 juin 2013Puis-je poster des contenus à partir d’une tablette Ipad ?
Oui, si votre Médiaspip installé est à la version 0.2 ou supérieure. Contacter au besoin l’administrateur de votre MédiaSpip pour le savoir -
Changer son thème graphique
22 février 2011, parLe thème graphique ne touche pas à la disposition à proprement dite des éléments dans la page. Il ne fait que modifier l’apparence des éléments.
Le placement peut être modifié effectivement, mais cette modification n’est que visuelle et non pas au niveau de la représentation sémantique de la page.
Modifier le thème graphique utilisé
Pour modifier le thème graphique utilisé, il est nécessaire que le plugin zen-garden soit activé sur le site.
Il suffit ensuite de se rendre dans l’espace de configuration du (...)
Sur d’autres sites (12547)
-
How to play and seek fragmented MP4 audio using MSE SourceBuffer ?
29 juin 2024, par Stefan FalkNote :




If you end up here, you might want to take a look at shaka-player and the accompanying shaka-streamer. Use it. Don't implement this yourself unless you really have to.




I am trying for quite some time now to be able to play an audio track on Chrome, Firefox, Safari, etc. but I keep hitting brick walls. My problem is currently that I am just not able to seek within a fragmented MP4 (or MP3).


At the moment I am converting audio files such as MP3 to fragmented MP4 (fMP4) and send them chunk-wise to the client. What I do is defining a
CHUNK_DURACTION_SEC(chunk duration in seconds) and compute a chunk size like this :

chunksTotal = Math.ceil(this.track.duration / CHUNK_DURATION_SEC);
chunkSize = Math.ceil(this.track.fileSize / this.chunksTotal);


With this I partition the audio file and can fetch it entirely jumping
chunkSize-many bytes for each chunk :

-----------------------------------------
| chunk 1 | chunk 2 | ... | chunk n |
-----------------------------------------


How audio files are converted to fMP4


ffmpeg -i input.mp3 -acodec aac -b:a 256k -f mp4 \
 -movflags faststart+frag_every_frame+empty_moov+default_base_moof \
 output.mp4


This seems to work with Chrome and Firefox (so far).


How chunks are appended


After following this example, and realizing that it's simply not working as it is explained here, I threw it away and started over from scratch. Unfortunately without success. It's still not working.


The following code is supposed to play a track from the very beginning to the very end. However, I also need to be able to seek. So far, this is simply not working. Seeking will just stop the audio after the
seekingevent got triggered.

The code


/* Desired chunk duration in seconds. */
const CHUNK_DURATION_SEC = 20;

const AUDIO_EVENTS = [
 'ended',
 'error',
 'play',
 'playing',
 'seeking',
 'seeked',
 'pause',
 'timeupdate',
 'canplay',
 'loadedmetadata',
 'loadstart',
 'updateend',
];


class ChunksLoader {

 /** The total number of chunks for the track. */
 public readonly chunksTotal: number;

 /** The length of one chunk in bytes */
 public readonly chunkSize: number;

 /** Keeps track of requested chunks. */
 private readonly requested: boolean[];

 /** URL of endpoint for fetching audio chunks. */
 private readonly url: string;

 constructor(
 private track: Track,
 private sourceBuffer: SourceBuffer,
 private logger: NGXLogger,
 ) {

 this.chunksTotal = Math.ceil(this.track.duration / CHUNK_DURATION_SEC);
 this.chunkSize = Math.ceil(this.track.fileSize / this.chunksTotal);

 this.requested = [];
 for (let i = 0; i < this.chunksTotal; i++) {
 this.requested[i] = false;
 }

 this.url = `${environment.apiBaseUrl}/api/tracks/${this.track.id}/play`;
 }

 /**
 * Fetch the first chunk.
 */
 public begin() {
 this.maybeFetchChunk(0);
 }

 /**
 * Handler for the "timeupdate" event. Checks if the next chunk should be fetched.
 *
 * @param currentTime
 * The current time of the track which is currently played.
 */
 public handleOnTimeUpdate(currentTime: number) {

 const nextChunkIndex = Math.floor(currentTime / CHUNK_DURATION_SEC) + 1;
 const hasAllChunks = this.requested.every(val => !!val);

 if (nextChunkIndex === (this.chunksTotal - 1) && hasAllChunks) {
 this.logger.debug('Last chunk. Calling mediaSource.endOfStream();');
 return;
 }

 if (this.requested[nextChunkIndex] === true) {
 return;
 }

 if (currentTime < CHUNK_DURATION_SEC * (nextChunkIndex - 1 + 0.25)) {
 return;
 }

 this.maybeFetchChunk(nextChunkIndex);
 }

 /**
 * Fetches the chunk if it hasn't been requested yet. After the request finished, the returned
 * chunk gets appended to the SourceBuffer-instance.
 *
 * @param chunkIndex
 * The chunk to fetch.
 */
 private maybeFetchChunk(chunkIndex: number) {

 const start = chunkIndex * this.chunkSize;
 const end = start + this.chunkSize - 1;

 if (this.requested[chunkIndex] == true) {
 return;
 }

 this.requested[chunkIndex] = true;

 if ((end - start) == 0) {
 this.logger.warn('Nothing to fetch.');
 return;
 }

 const totalKb = ((end - start) / 1000).toFixed(2);
 this.logger.debug(`Starting to fetch bytes ${start} to ${end} (total ${totalKb} kB). Chunk ${chunkIndex + 1} of ${this.chunksTotal}`);

 const xhr = new XMLHttpRequest();
 xhr.open('get', this.url);
 xhr.setRequestHeader('Authorization', `Bearer ${AuthenticationService.getJwtToken()}`);
 xhr.setRequestHeader('Range', 'bytes=' + start + '-' + end);
 xhr.responseType = 'arraybuffer';
 xhr.onload = () => {
 this.logger.debug(`Range ${start} to ${end} fetched`);
 this.logger.debug(`Requested size: ${end - start + 1}`);
 this.logger.debug(`Fetched size: ${xhr.response.byteLength}`);
 this.logger.debug('Appending chunk to SourceBuffer.');
 this.sourceBuffer.appendBuffer(xhr.response);
 };
 xhr.send();
 };

}

export enum StreamStatus {
 NOT_INITIALIZED,
 INITIALIZING,
 PLAYING,
 SEEKING,
 PAUSED,
 STOPPED,
 ERROR
}

export class PlayerState {
 status: StreamStatus = StreamStatus.NOT_INITIALIZED;
}


/**
 *
 */
@Injectable({
 providedIn: 'root'
})
export class MediaSourcePlayerService {

 public track: Track;

 private mediaSource: MediaSource;

 private sourceBuffer: SourceBuffer;

 private audioObj: HTMLAudioElement;

 private chunksLoader: ChunksLoader;

 private state: PlayerState = new PlayerState();

 private state$ = new BehaviorSubject<playerstate>(this.state);

 public stateChange = this.state$.asObservable();

 private currentTime$ = new BehaviorSubject<number>(null);

 public currentTimeChange = this.currentTime$.asObservable();

 constructor(
 private httpClient: HttpClient,
 private logger: NGXLogger
 ) {
 }

 get canPlay() {
 const state = this.state$.getValue();
 const status = state.status;
 return status == StreamStatus.PAUSED;
 }

 get canPause() {
 const state = this.state$.getValue();
 const status = state.status;
 return status == StreamStatus.PLAYING || status == StreamStatus.SEEKING;
 }

 public playTrack(track: Track) {
 this.logger.debug('playTrack');
 this.track = track;
 this.startPlayingFrom(0);
 }

 public play() {
 this.logger.debug('play()');
 this.audioObj.play().then();
 }

 public pause() {
 this.logger.debug('pause()');
 this.audioObj.pause();
 }

 public stop() {
 this.logger.debug('stop()');
 this.audioObj.pause();
 }

 public seek(seconds: number) {
 this.logger.debug('seek()');
 this.audioObj.currentTime = seconds;
 }

 private startPlayingFrom(seconds: number) {
 this.logger.info(`Start playing from ${seconds.toFixed(2)} seconds`);
 this.mediaSource = new MediaSource();
 this.mediaSource.addEventListener('sourceopen', this.onSourceOpen);

 this.audioObj = document.createElement('audio');
 this.addEvents(this.audioObj, AUDIO_EVENTS, this.handleEvent);
 this.audioObj.src = URL.createObjectURL(this.mediaSource);

 this.audioObj.play().then();
 }

 private onSourceOpen = () => {

 this.logger.debug('onSourceOpen');

 this.mediaSource.removeEventListener('sourceopen', this.onSourceOpen);
 this.mediaSource.duration = this.track.duration;

 this.sourceBuffer = this.mediaSource.addSourceBuffer('audio/mp4; codecs="mp4a.40.2"');
 // this.sourceBuffer = this.mediaSource.addSourceBuffer('audio/mpeg');

 this.chunksLoader = new ChunksLoader(
 this.track,
 this.sourceBuffer,
 this.logger
 );

 this.chunksLoader.begin();
 };

 private handleEvent = (e) => {

 const currentTime = this.audioObj.currentTime.toFixed(2);
 const totalDuration = this.track.duration.toFixed(2);
 this.logger.warn(`MediaSource event: ${e.type} (${currentTime} of ${totalDuration} sec)`);

 this.currentTime$.next(this.audioObj.currentTime);

 const currentStatus = this.state$.getValue();

 switch (e.type) {
 case 'playing':
 currentStatus.status = StreamStatus.PLAYING;
 this.state$.next(currentStatus);
 break;
 case 'pause':
 currentStatus.status = StreamStatus.PAUSED;
 this.state$.next(currentStatus);
 break;
 case 'timeupdate':
 this.chunksLoader.handleOnTimeUpdate(this.audioObj.currentTime);
 break;
 case 'seeking':
 currentStatus.status = StreamStatus.SEEKING;
 this.state$.next(currentStatus);
 if (this.mediaSource.readyState == 'open') {
 this.sourceBuffer.abort();
 }
 this.chunksLoader.handleOnTimeUpdate(this.audioObj.currentTime);
 break;
 }
 };

 private addEvents(obj, events, handler) {
 events.forEach(event => obj.addEventListener(event, handler));
 }

}
</number></playerstate>

Running it will give me the following output :






Apologies for the screenshot but it's not possible to just copy the output without all the stack traces in Chrome.




What I also tried was following this example and call
sourceBuffer.abort()but that didn't work. It looks more like a hack that used to work years ago but it's still referenced in the docs (see "Example" -> "You can see something similar in action in Nick Desaulnier's bufferWhenNeeded demo ..").

case 'seeking':
 currentStatus.status = StreamStatus.SEEKING;
 this.state$.next(currentStatus); 
 if (this.mediaSource.readyState === 'open') {
 this.sourceBuffer.abort();
 } 
 break;


Trying with MP3


I have tested the above code under Chrome by converting tracks to MP3 :


ffmpeg -i input.mp3 -acodec aac -b:a 256k -f mp3 output.mp3


and creating a
SourceBufferusingaudio/mpegas type :

this.mediaSource.addSourceBuffer('audio/mpeg')


I have the same problem when seeking.


The issue wihout seeking


The above code has another issue :


After two minutes of playing, the audio playback starts to stutter and comes to a halt prematurely. So, the audio plays up to a point and then it stops without any obvious reason.


For whatever reason there is another
canplayandplayingevent. A few seconds after, the audio simply stops..



-
Set dwSuggestBufferSize to largest chunk size for every stream in avi.
19 mai 2014, par Carl Eugen HoyosSet dwSuggestBufferSize to largest chunk size for every stream in avi.
Fixes playback with WMP 9 for files with large (rawvideo) frames
as explained in ticket #2145.Fixes ticket #2818.
- [DH] libavformat/avienc.c
- [DH] tests/ref/fate/force_key_frames
- [DH] tests/ref/lavf/avi
- [DH] tests/ref/vsynth/vsynth1-amv
- [DH] tests/ref/vsynth/vsynth1-asv1
- [DH] tests/ref/vsynth/vsynth1-asv2
- [DH] tests/ref/vsynth/vsynth1-cljr
- [DH] tests/ref/vsynth/vsynth1-ffv1
- [DH] tests/ref/vsynth/vsynth1-ffv1.0
- [DH] tests/ref/vsynth/vsynth1-ffvhuff
- [DH] tests/ref/vsynth/vsynth1-ffvhuff420p12
- [DH] tests/ref/vsynth/vsynth1-ffvhuff422p10left
- [DH] tests/ref/vsynth/vsynth1-ffvhuff444
- [DH] tests/ref/vsynth/vsynth1-ffvhuff444p16
- [DH] tests/ref/vsynth/vsynth1-h261
- [DH] tests/ref/vsynth/vsynth1-h261-trellis
- [DH] tests/ref/vsynth/vsynth1-h263
- [DH] tests/ref/vsynth/vsynth1-h263-obmc
- [DH] tests/ref/vsynth/vsynth1-h263p
- [DH] tests/ref/vsynth/vsynth1-huffyuv
- [DH] tests/ref/vsynth/vsynth1-jpeg2000
- [DH] tests/ref/vsynth/vsynth1-jpeg2000-97
- [DH] tests/ref/vsynth/vsynth1-jpegls
- [DH] tests/ref/vsynth/vsynth1-ljpeg
- [DH] tests/ref/vsynth/vsynth1-mjpeg
- [DH] tests/ref/vsynth/vsynth1-mjpeg-422
- [DH] tests/ref/vsynth/vsynth1-mjpeg-444
- [DH] tests/ref/vsynth/vsynth1-mpeg4-adap
- [DH] tests/ref/vsynth/vsynth1-mpeg4-adv
- [DH] tests/ref/vsynth/vsynth1-mpeg4-error
- [DH] tests/ref/vsynth/vsynth1-mpeg4-nr
- [DH] tests/ref/vsynth/vsynth1-mpeg4-qpel
- [DH] tests/ref/vsynth/vsynth1-mpeg4-qprd
- [DH] tests/ref/vsynth/vsynth1-mpeg4-rc
- [DH] tests/ref/vsynth/vsynth1-mpeg4-thread
- [DH] tests/ref/vsynth/vsynth1-mpng
- [DH] tests/ref/vsynth/vsynth1-msmpeg4
- [DH] tests/ref/vsynth/vsynth1-msmpeg4v2
- [DH] tests/ref/vsynth/vsynth1-msvideo1
- [DH] tests/ref/vsynth/vsynth1-r210
- [DH] tests/ref/vsynth/vsynth1-rgb
- [DH] tests/ref/vsynth/vsynth1-snow
- [DH] tests/ref/vsynth/vsynth1-snow-hpel
- [DH] tests/ref/vsynth/vsynth1-snow-ll
- [DH] tests/ref/vsynth/vsynth1-v210
- [DH] tests/ref/vsynth/vsynth1-v308
- [DH] tests/ref/vsynth/vsynth1-v408
- [DH] tests/ref/vsynth/vsynth1-wmv1
- [DH] tests/ref/vsynth/vsynth1-wmv2
- [DH] tests/ref/vsynth/vsynth1-y41p
- [DH] tests/ref/vsynth/vsynth1-yuv
- [DH] tests/ref/vsynth/vsynth1-yuv4
- [DH] tests/ref/vsynth/vsynth1-zlib
- [DH] tests/ref/vsynth/vsynth2-amv
- [DH] tests/ref/vsynth/vsynth2-asv1
- [DH] tests/ref/vsynth/vsynth2-asv2
- [DH] tests/ref/vsynth/vsynth2-cljr
- [DH] tests/ref/vsynth/vsynth2-ffv1
- [DH] tests/ref/vsynth/vsynth2-ffv1.0
- [DH] tests/ref/vsynth/vsynth2-ffvhuff
- [DH] tests/ref/vsynth/vsynth2-ffvhuff420p12
- [DH] tests/ref/vsynth/vsynth2-ffvhuff422p10left
- [DH] tests/ref/vsynth/vsynth2-ffvhuff444
- [DH] tests/ref/vsynth/vsynth2-ffvhuff444p16
- [DH] tests/ref/vsynth/vsynth2-h261
- [DH] tests/ref/vsynth/vsynth2-h261-trellis
- [DH] tests/ref/vsynth/vsynth2-h263
- [DH] tests/ref/vsynth/vsynth2-h263-obmc
- [DH] tests/ref/vsynth/vsynth2-h263p
- [DH] tests/ref/vsynth/vsynth2-huffyuv
- [DH] tests/ref/vsynth/vsynth2-jpeg2000
- [DH] tests/ref/vsynth/vsynth2-jpeg2000-97
- [DH] tests/ref/vsynth/vsynth2-jpegls
- [DH] tests/ref/vsynth/vsynth2-ljpeg
- [DH] tests/ref/vsynth/vsynth2-mjpeg
- [DH] tests/ref/vsynth/vsynth2-mjpeg-422
- [DH] tests/ref/vsynth/vsynth2-mjpeg-444
- [DH] tests/ref/vsynth/vsynth2-mpeg4-adap
- [DH] tests/ref/vsynth/vsynth2-mpeg4-adv
- [DH] tests/ref/vsynth/vsynth2-mpeg4-error
- [DH] tests/ref/vsynth/vsynth2-mpeg4-nr
- [DH] tests/ref/vsynth/vsynth2-mpeg4-qpel
- [DH] tests/ref/vsynth/vsynth2-mpeg4-qprd
- [DH] tests/ref/vsynth/vsynth2-mpeg4-rc
- [DH] tests/ref/vsynth/vsynth2-mpeg4-thread
- [DH] tests/ref/vsynth/vsynth2-mpng
- [DH] tests/ref/vsynth/vsynth2-msmpeg4
- [DH] tests/ref/vsynth/vsynth2-msmpeg4v2
- [DH] tests/ref/vsynth/vsynth2-msvideo1
- [DH] tests/ref/vsynth/vsynth2-r210
- [DH] tests/ref/vsynth/vsynth2-rgb
- [DH] tests/ref/vsynth/vsynth2-snow
- [DH] tests/ref/vsynth/vsynth2-snow-hpel
- [DH] tests/ref/vsynth/vsynth2-snow-ll
- [DH] tests/ref/vsynth/vsynth2-v210
- [DH] tests/ref/vsynth/vsynth2-v308
- [DH] tests/ref/vsynth/vsynth2-v408
- [DH] tests/ref/vsynth/vsynth2-wmv1
- [DH] tests/ref/vsynth/vsynth2-wmv2
- [DH] tests/ref/vsynth/vsynth2-y41p
- [DH] tests/ref/vsynth/vsynth2-yuv
- [DH] tests/ref/vsynth/vsynth2-yuv4
- [DH] tests/ref/vsynth/vsynth2-zlib
-
How HSBC and ING are transforming banking with AI
9 novembre 2024, par Daniel Crough — Banking and Financial Services, Featured Banking ContentWe recently partnered with FinTech Futures to produce an exciting webinar discussing how analytics leaders from two global banks are using AI to protect customers, streamline operations, and support environmental goals.
Watch the on-demand webinar : Advancing analytics maturity.
<script><br />
gform.initializeOnLoaded( function() {gformInitSpinner( 71, 'https://matomo.org/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery('#gform_ajax_frame_71').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_71');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_71').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_71').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_71').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_71').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_71').val();gformInitSpinner( 71, 'https://matomo.org/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery(document).trigger('gform_page_loaded', [71, current_page]);window['gf_submitting_71'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}setTimeout(function(){jQuery('#gform_wrapper_71').replaceWith(confirmation_content);jQuery(document).trigger('gform_confirmation_loaded', [71]);window['gf_submitting_71'] = false;wp.a11y.speak(jQuery('#gform_confirmation_message_71').text());}, 50);}else{jQuery('#gform_71').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger("gform_pre_post_render", [{ formId: "71", currentPage: "current_page", abort: function() { this.preventDefault(); } }]); if (event.defaultPrevented) { return; } const gformWrapperDiv = document.getElementById( "gform_wrapper_71" ); if ( gformWrapperDiv ) { const visibilitySpan = document.createElement( "span" ); visibilitySpan.id = "gform_visibility_test_71"; gformWrapperDiv.insertAdjacentElement( "afterend", visibilitySpan ); } const visibilityTestDiv = document.getElementById( "gform_visibility_test_71" ); let postRenderFired = false; function triggerPostRender() { if ( postRenderFired ) { return; } postRenderFired = true; jQuery( document ).trigger( 'gform_post_render', [71, current_page] ); gform.utils.trigger( { event: 'gform/postRender', native: false, data: { formId: 71, currentPage: current_page } } ); if ( visibilityTestDiv ) { visibilityTestDiv.parentNode.removeChild( visibilityTestDiv ); } } function debounce( func, wait, immediate ) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if ( !immediate ) func.apply( context, args ); }; var callNow = immediate && !timeout; clearTimeout( timeout ); timeout = setTimeout( later, wait ); if ( callNow ) func.apply( context, args ); }; } const debouncedTriggerPostRender = debounce( function() { triggerPostRender(); }, 200 ); if ( visibilityTestDiv && visibilityTestDiv.offsetParent === null ) { const observer = new MutationObserver( ( mutations ) => { mutations.forEach( ( mutation ) => { if ( mutation.type === 'attributes' && visibilityTestDiv.offsetParent !== null ) { debouncedTriggerPostRender(); observer.disconnect(); } }); }); observer.observe( document.body, { attributes: true, childList: false, subtree: true, attributeFilter: [ 'style', 'class' ], }); } else { triggerPostRender(); } } );} );<br />
</script>Meet the expert panel
Roshini Johri heads ESG Analytics at HSBC, where she leads AI and remote sensing applications supporting the bank’s net zero goals. Her expertise spans climate tech and financial services, with a focus on scalable analytics solutions.
Marco Li Mandri leads Advanced Analytics Strategy at ING, where he focuses on delivering high-impact solutions and strengthening analytics foundations. His background combines analytics, KYC operations, and AI strategy.
Carmen Soini Tourres works as a Web Analyst Consultant at Matomo, helping financial organisations optimise their digital presence whilst maintaining privacy compliance.Key findings from the webinar
The discussion highlighted four essential elements for advancing analytics capabilities :
1. Strong data foundations matter most
“It doesn’t matter how good the AI model is. It is garbage in, garbage out,”
Johri explained. Banks need robust data governance that works across different regulatory environments.
2. Transform rather than tweak
Li Mandri emphasised the need to reconsider entire processes :
“We try to look at the banking domain and processes and try to re-imagine how they should be done with AI.”
3. Bridge technical and business understanding
Both leaders stressed the value of analytics translators who understand both technology and business needs.
“We’re investing in this layer we call product leads,”
Li Mandri explained. These roles combine technical knowledge with business acumen – a rare but vital skill set.
4. Consider production costs early
Moving from proof-of-concept to production requires careful planning. As Johri noted :
“The scale of doing things in production is quite massive and often doesn’t get accounted for in the cost.”
This includes :
- Ongoing monitoring requirements
- Maintenance needs
- Regulatory compliance checks
- Regular model updates
Real-world applications
ING’s approach demonstrates how banks can transform their operations through thoughtful AI implementation. Li Mandri shared several areas where the bank has successfully deployed analytics solutions, each benefiting both the bank and its customers.
Customer experience enhancement
The bank’s implementation of AI-powered instant loan processing shows how analytics can transform traditional banking.
“We know AI can make loans instant for the customer, that’s great. Clicking one button and adding a loan, that really changes things,”
Li Mandri explained. This goes beyond automation – it represents a fundamental shift in how banks serve their customers.
The system analyses customer data to make rapid lending decisions while maintaining strong risk assessment standards. For customers, this means no more lengthy waiting periods or complex applications. For the bank, it means more efficient resource use and better risk management.
The bank also uses AI to personalise customer communications.
“We’re using that to make certain campaigns more personalised, having a certain tone of voice,”
noted Li Mandri. This particularly resonates with younger customers who expect relevant, personalised interactions from their bank.
Operational efficiency transformation
ING’s approach to Know Your Customer (KYC) processes shows how AI can transform resource-heavy operations.
“KYC is a big area of cost for the bank. So we see massive value there, a lot of scale,”
Li Mandri explained. The bank developed an AI-powered system that :
- Automates document verification
- Flags potential compliance issues for human review
- Maintains consistent standards across jurisdictions
- Reduces processing time while improving accuracy
This implementation required careful consideration of regulations across different markets. The bank developed monitoring systems to ensure their AI models maintain high accuracy while meeting compliance standards.
In the back office, ING uses AI to extract and process data from various documents, significantly reducing manual work. This automation lets staff focus on complex tasks requiring human judgment.
Sustainable finance initiatives
ING’s commitment to sustainable banking has driven innovative uses of AI in environmental assessment.
“We have this ambition to be a sustainable bank. If you want to be a sustainable finance customer, that requires a lot of work to understand who the company is, always comparing against its peers.”
The bank developed AI models that :
- Analyse company sustainability metrics
- Compare environmental performance against industry benchmarks
- Assess transition plans for high-emission industries
- Monitor ongoing compliance with sustainability commitments
This system helps staff evaluate the environmental impact of potential deals quickly and accurately.
“We are using AI there to help our frontline process customers to see how green that deal might be and then use that as a decision point,”
Li Mandri noted.
HSBC’s innovative approach
Under Johri’s leadership, HSBC has developed several groundbreaking uses of AI and analytics, particularly in environmental monitoring and operational efficiency. Their work shows how banks can use advanced technology to address complex global challenges while meeting regulatory requirements.
Environmental monitoring through advanced technology
HSBC uses computer vision and satellite imagery analysis to measure environmental impact with new precision.
“This is another big research area where we look at satellite images and we do what is called remote sensing, which is the study of a remote area,”
Johri explained.
The system provides several key capabilities :
- Analysis of forest coverage and deforestation rates
- Assessment of biodiversity impact in specific regions
- Monitoring of environmental changes over time
- Measurement of environmental risk in lending portfolios
“We can look at distant images of forest areas and understand how much percentage deforestation is being caused in that area, and we can then measure our biodiversity impact more accurately,”
Johri noted. This technology enables HSBC to :
- Make informed lending decisions
- Monitor environmental commitments of borrowers
- Support sustainability-linked lending programmes
- Provide accurate environmental impact reporting
Transforming document analysis
HSBC is tackling one of banking’s most time-consuming challenges : processing vast amounts of documentation.
“Can we reduce the onus of human having to go and read 200 pages of sustainability reports each time to extract answers ?”
Johri asked. Their solution combines several AI technologies to make this process more efficient while maintaining accuracy.
The bank’s approach includes :
- Natural language processing to understand complex documents
- Machine learning models to extract relevant information
- Validation systems to ensure accuracy
- Integration with existing compliance frameworks
“We’re exploring solutions to improve our reporting, but we need to do it in a safe, robust and transparent way.”
This careful balance between efficiency and accuracy exemplifies HSBC’s approach to AI.
Building future-ready analytics capabilities
Both banks emphasise that successful analytics requires a comprehensive, long-term approach. Their experiences highlight several critical considerations for financial institutions looking to advance their analytics capabilities.
Developing clear governance frameworks
“Understanding your AI risk appetite is crucial because banking is a highly regulated environment,”
Johri emphasised. Banks need to establish governance structures that :
- Define acceptable uses for AI
- Establish monitoring and control mechanisms
- Ensure compliance with evolving regulations
- Maintain transparency in AI decision-making
Creating solutions that scale
Li Mandri stressed the importance of building systems that grow with the organisation :
“When you try to prototype a model, you have to take care about the data safety, ethical consideration, you have to identify a way to monitor that model. You need model standard governance.”
Successful scaling requires :
- Standard approaches to model development
- Clear evaluation frameworks
- Simple processes for model updates
- Strong monitoring systems
- Regular performance reviews
Investing in people and skills
Both leaders highlighted how important skilled people are to analytics success.
“Having a good hiring strategy as well as creating that data literacy is really important,”
Johri noted. Banks need to :
- Develop comprehensive training programmes
- Create clear career paths for analytics professionals
- Foster collaboration between technical and business teams
- Build internal expertise in emerging technologies
Planning for the future
Looking ahead, both banks are preparing for increased regulation and growing demands for transparency. Key focus areas include :
- Adapting to new privacy regulations
- Making AI decisions more explainable
- Improving data quality and governance
- Strengthening cybersecurity measures
Practical steps for financial institutions
The experiences shared by HSBC and ING provide valuable insights for financial institutions at any stage of their analytics journey. Their successes and challenges outline a clear path forward.
Key steps for success
Financial institutions looking to enhance their analytics capabilities should :
- Start with strong foundations
- Invest in clear data governance frameworks
- Set data quality standards
- Build thorough documentation processes
- Create transparent data tracking
- Think strategically about AI implementation
- Focus on transformative rather than small changes
- Consider the full costs of AI projects
- Build solutions that can grow
- Balance innovation with risk management
- Invest in people and processes
- Develop internal analytics expertise
- Create clear paths for career growth
- Foster collaboration between technical and business teams
- Build a culture of data literacy
- Plan for scale
- Establish monitoring systems
- Create governance frameworks
- Develop standard approaches to model development
- Stay flexible for future regulatory changes
Learn more
Want to hear more insights from these industry leaders ? Watch the complete webinar recording on demand. You’ll learn :
- Detailed technical insights from both banks
- Extended Q&A with the speakers
- Additional case studies and examples
- Practical implementation advice
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Watch the on-demand webinar : Advancing analytics maturity.
<script><br />
gform.initializeOnLoaded( function() {gformInitSpinner( 71, 'https://matomo.org/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery('#gform_ajax_frame_71').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_71');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_71').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_71').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_71').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_71').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_71').val();gformInitSpinner( 71, 'https://matomo.org/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery(document).trigger('gform_page_loaded', [71, current_page]);window['gf_submitting_71'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}setTimeout(function(){jQuery('#gform_wrapper_71').replaceWith(confirmation_content);jQuery(document).trigger('gform_confirmation_loaded', [71]);window['gf_submitting_71'] = false;wp.a11y.speak(jQuery('#gform_confirmation_message_71').text());}, 50);}else{jQuery('#gform_71').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger("gform_pre_post_render", [{ formId: "71", currentPage: "current_page", abort: function() { this.preventDefault(); } }]); if (event.defaultPrevented) { return; } const gformWrapperDiv = document.getElementById( "gform_wrapper_71" ); if ( gformWrapperDiv ) { const visibilitySpan = document.createElement( "span" ); visibilitySpan.id = "gform_visibility_test_71"; gformWrapperDiv.insertAdjacentElement( "afterend", visibilitySpan ); } const visibilityTestDiv = document.getElementById( "gform_visibility_test_71" ); let postRenderFired = false; function triggerPostRender() { if ( postRenderFired ) { return; } postRenderFired = true; jQuery( document ).trigger( 'gform_post_render', [71, current_page] ); gform.utils.trigger( { event: 'gform/postRender', native: false, data: { formId: 71, currentPage: current_page } } ); if ( visibilityTestDiv ) { visibilityTestDiv.parentNode.removeChild( visibilityTestDiv ); } } function debounce( func, wait, immediate ) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if ( !immediate ) func.apply( context, args ); }; var callNow = immediate && !timeout; clearTimeout( timeout ); timeout = setTimeout( later, wait ); if ( callNow ) func.apply( context, args ); }; } const debouncedTriggerPostRender = debounce( function() { triggerPostRender(); }, 200 ); if ( visibilityTestDiv && visibilityTestDiv.offsetParent === null ) { const observer = new MutationObserver( ( mutations ) => { mutations.forEach( ( mutation ) => { if ( mutation.type === 'attributes' && visibilityTestDiv.offsetParent !== null ) { debouncedTriggerPostRender(); observer.disconnect(); } }); }); observer.observe( document.body, { attributes: true, childList: false, subtree: true, attributeFilter: [ 'style', 'class' ], }); } else { triggerPostRender(); } } );} );<br />
</script>
Syndiquer tout le site
