Перекрестное затухание аудиоэлемента с помощью JavaScript

У меня есть аудиоэлемент HTML, воспроизводящий файл MP3, и моя цель — плавно перевести его в другой файл MP3 с помощью vanilla JS или jQuery. Другими словами, я хочу, чтобы новый трек постепенно исчезал, в то время как старый трек все еще исчезает. Замена src мгновенно изменит песню, а не постепенно их затухнет, так что это было бы нецелесообразно.

Одно решение, которое я нашел, заключается в использовании двух аудиоэлементов, один из которых будет служить «резервной копией», содержащей новую песню. Когда я хочу их перенести, я постепенно уменьшаю громкость текущей дорожки и увеличиваю громкость резервной копии:

var currentTrack = $('#currentSong')
var backupTrack = $('#newSong')

currentTrack.animate({volume: 0}, 1000) //Fade out the current song
backupTrack[0].load()
backupTrack.animate({volume: 1}, 1000) //Fade in new song
backupTrack[0].play()

Хотя это работает, это кажется немного хакерским, особенно если я хочу применить это к нескольким аудиоэлементам. Мне интересно, есть ли более эффективный способ сделать это, не удваивая количество аудиоэлементов на странице.