ここでは自作したlupin.jsの紹介です。

音声再生はjPlayerプラグインを使用しました。

jPlayerの実装はこちらで解説しています。
https://office-goto.info/javascript-jquery/jplayer/

デモはこちら
https://office-goto.info/demo/lupin/

lupin.js

$(document).ready(function(){
    $("#player").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: "js/type.mp3"
            });
        },swfPath: "js"
    });

    $('.box').hide();
    $('.box_after').hide();
});

var timer;      // タイマーオブジェクト
var title;      // タイトル
var arrTitle;   // タイトル配列
var i = 0;      // カウント
var length = 0; // 最大カウント

function lupinAction(str) {
    $('.box').show();
    $('a').hide();
    $('h2').hide();
    title = str;
    arrTitle = str.split('');
    length = arrTitle.length;
    timer = setInterval("lstart()", 300);
}
function lstart(){
    $("#player").jPlayer('stop');
    $("#player").jPlayer('setMedia', {
        mp3: "js/type.mp3"
    }).jPlayer('play');
    $('.box').text(arrTitle[i]);
    i++;
    if (length == i) {
        setTimeout(function(){
            $("#player").jPlayer('stop');
            $("#player").jPlayer('setMedia', {
                mp3: "js/title.mp3"
            }).jPlayer('play');
            clearInterval(timer);
            $('.box_after').show();
            $('.box_after').html('<p>' + title + '</p>');
            setTimeout(function(){
                $('a').show();
                $('h2').show();
                $('.box').hide();
                $('.box').empty();
                $('.box_after').hide();
                $('p').remove();
                i = 0;
                length = 0;
                arrTitle = null;
                title = null;
            },4000);
        },300);
    }
}

lupin.css

#lupin .box{
    position: absolute;
    width:500px;
    height:440px;
    margin-left:-250px;
    margin-top:-220px;
    top: 50%;
    left: 50%;
    background-color:#000;
    font-size: 430px;
    font-family: ＭＳ 明朝;
    color:#fff;
    text-align: center;
    line-height: 440px;
}
#lupin .box_after{
    position: absolute;
    width:500px;
    height:440px;
    margin-left:-250px;
    margin-top:-220px;
    top: 50%;
    left: 50%;
    background-color:#000;
}
#lupin p {
    width:500px;
    height:440px;
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    font-size: 60px;
    font-family: ＭＳ 明朝;
    color:#fff;
}

html

<div id="lupin">
<ul>
<li><a href="" onclick="lupinAction('ルパン三世颯爽登場'); return false;">ルパン三世颯爽登場</a></li>
<li><a href="" onclick="lupinAction('死んでゆくブルース'); return false;">死んでゆくブルース</a></li>
<li><a href="" onclick="lupinAction('シッパイ大作戦'); return false;">シッパイ大作戦</a></li>
<li><a href="" onclick="lupinAction('集まれ奇人ども'); return false;">集まれ奇人ども</a></li>
<li><a href="" onclick="lupinAction('ルパンの法則'); return false;">ルパンの法則</a></li>
<li><a href="" onclick="lupinAction('盗っ人ゲーム'); return false;">盗っ人ゲーム</a></li>
<li><a href="" onclick="lupinAction('ストレート・フラッシュ'); return false;">ストレート・フラッシュ</a></li>
<li><a href="" onclick="lupinAction('イヌも歩けばルパンにあたる'); return false;">イヌも歩けばルパンにあたる</a></li>
<li><a href="" onclick="lupinAction('さらば愛しきルパン！'); return false;">さらば愛しきルパン！</a></li>
<li><a href="" onclick="lupinAction('バカボン一家がサヨウナラ'); return false;">バカボン一家がサヨウナラ</a></li>
</ul>
<div class="box"></div>
<div class="box_after"></div>
<div id="player"></div>
</div>