【必見】アニメやゲームのオフィシャルサイトでキャラクター紹介時に使える音声と服装変更時に使える簡単コード

サンプルボイスを複数設置してボタンで切り替えよう！（簡単なコード）

下記は二つボタンを設置した場合のjQueryになります。

jQuery( function() {
$('#btn01.on').click(function () {
if($(this).hasClass("on")){//再生していない時
//別のボタン画像を再生ボタン表示
$('#btn02').removeClass('change');
$("#btn02").addClass("on");
//ボタン画像を停止画像から再生画像に変更
$('#btn01').removeClass('on');
$('#btn01').addClass('change');
//#btn01をクリックしたら再生
document.getElementById("audio01").play();
//#btn01をクリックしたら別の音声を停止
document.getElementById("audio02").pause();
document.getElementById("audio02").currentTime = 0;
return false;
} else {//再生している時
//別のボタン画像を停止ボタン表示
$("#btn02").addClass("on");
//ボタン画像を再生画像から停止画像に変更
$('#btn01').removeClass('change');
$('#btn01').addClass('on');
//#btn01をクリックしたら音声を停止
document.getElementById("audio01").pause();
document.getElementById("audio01").currentTime = 0;
return false;
}
});
$('#btn02.on').click(function () {
if($(this).hasClass("on")){//再生していない時
//別のボタン画像を再生ボタン表示
$('#btn01').removeClass('change');
$("#btn01").addClass("on");
//ボタン画像を停止画像から再生画像に変更
$('#btn02').removeClass('on');
$('#btn02').addClass('change');
//#btn01をクリックしたら再生
document.getElementById("audio02").play();
//#btn01をクリックしたら別の音声を停止
document.getElementById("audio01").pause();
document.getElementById("audio01").currentTime = 0;
return false;
} else {//再生している時
//別のボタン画像を停止ボタン表示
$("#btn01").addClass("on");
//ボタン画像を再生画像から停止画像に変更
$('#btn02').removeClass('change');
$('#btn02').addClass('on');
//#btn02をクリックしたら音声を停止
document.getElementById("audio02").pause();
document.getElementById("audio02").currentTime = 0;
return false;
}
});
});

id名やclass名は変更しても大丈夫です。その際に、htmlやcssも合わせるのをお忘れずに！

次に、htmlになります。

<ul>
<li>
<audio id="audio01" preload="auto"><source src="audio/〇〇.mp3" type="audio/mp3"></audio>
<button type="button" id="btn01" class="on"/></button>
</li>
<li>
<audio preload="auto" id="audio02"><source src="audio/〇〇.mp3" type="audio/mp3"></audio>
<button type="button" id="btn02" class="on"></button>
</li>
</ul>

そして、cssです。

#btn01{ background-image: url(../images/〇〇-on.png);}
#btn01.change{ background-image: url(../images/〇〇-off.png);}
#btn02{ background-image: url(../images/〇〇-on.png);}
#btn02.change{ background-image: url(../images/〇〇-off.png);}

以上で、音声がボタンを押すと再生・停止されます。また、ボタン箇所もクリックで画像が差し変わる様になっています。

cssなどの細かい指定は省いてありますので、お好きな様にcssを書いていただければと思います。

キャラクターの服装を変更させるボタンを設置しよう！（簡単なコード）

下記は二つボタンを設置した場合のjQueryになります。

サンプルボイスのコードと似ています。

$(document).ready(function () {
$('#btn03.change').click(function () {
if($(this).hasClass("on")){
//キャラクター表示
$('#c01').addClass('on');
$('#c01').removeClass('off');
$('#c02').removeClass('on');
$('#c02').addClass('off');
//ボタンの切り替え
$('#btn04').removeClass('change');
$('#btn04').addClass('on');
$('#btn03').removeClass('on');
$('#btn03').addClass('change');
return false;
} else {
//キャラクター表示
$('#c01').removeClass('on');
//ボタンの切り替え
$('#btn03').addClass('change');
$('#btn03').addClass('on');
return false;
}
});
$('#btn04.on').click(function () {
if($(this).hasClass("on")){
//キャラクター表示
$('#c02').addClass('on');
$('#c02').removeClass('off');
$('#c01').removeClass('on');
$('#c01').addClass('off');
//ボタンの切り替え
$('#btn03').removeClass('change');
$('#btn03').addClass('on');
$('#btn04').removeClass('on');
$('#btn04').addClass('change');
return false;
} else {
//キャラクター表示
$('#c01').removeClass('on');
//ボタンの切り替え
$('#btn04').addClass('change');
$('#btn04').addClass('on');
return false;
}
});
});

htmlはボタンエリアとキャラクター表示エリアになります。

まずは、ボタンエリア。

<ul>
<li class="character-change">
<div id="btn03" class="change"></div>
</li>
<li class="character-change">
<div id="btn04" class="on"></div>
</li>
</ul>

次にキャラクターエリア。

<div id="character">
<div id="c01"><img src="images/character01.png" alt="character01" width="100%" /></div>
<div id="c02"><img src="images/character02.png" alt="character02" width="100%" /></div>
</div>

最後にcssになります。

//キャラクターのcss
#character #c01{ display: block;}
#character #c02{ display: none;}
#character #c01.on,
#character #c02.on{ display: block;}
#character #c01.off,
#character #c02.off{ display: none;}

//ボタンのcss
#btn03{ background-image: url(../images/icon-character01-off.png); background-repeat: no-repeat; background-position: center center; background-size: 67px; width: 67px; height: 67px;}
#btn03.on{ background-image: url(../images/icon-character01-on.png);}
#btn03.change{ background-image: url(../images/icon-character01-off.png);}
#btn04{ background-image: url(../images/icon-character02-on.png); background-repeat: no-repeat; background-position: center center; background-size: 67px; width: 67px; height: 67px;}
#btn04.change{ background-image: url(../images/icon-character02-off.png);}

これで終わりです。とても簡単なコードになります。

また、cssなどの細かい指定は省いてありますので、お好きな様にcssを書いていただければと思います。

最後にMUGENについて

MUGENとは

Webサイト制作会社（夢双合同会社）が運営するギャラリーサイトになります。エンタメ系（アニメ・ゲーム・同人など）サイト制作の参考になるWebサイトを収集しています。

夢双合同会社（MUSOU）とは

夢双は、エンタメ系を中心にWebサイト制作を致します。
新しい会社ではありますが、日本の行政機関や医療業界などからも多数の案件をお受けしております。
魅力を伝えるWebサイトを目標にし、WebディレクションからCMS（ WordPress・EC-CUBEなど ）を使用したWebサイト制作に携わっています。
作品や商品イメージに合わせたデザインやユーザービリティ・SNSプロモーションに適したコンテンツなどのご提案をさせていただきます。

夢双合同会社（MUSOU）にWebサイト制作の相談する