いちばん失敗した人決定戦

おしえて

ボタンをクリックした時に、キャラ画像と音声が同時にランダムで表示されるサイトを作りたいのですが、Ja

解決済

ボタンをクリックした時に、キャラ画像と音声が同時にランダムで表示されるサイトを作りたいのですが、Javascriptだけで作れますか？
MySQLなどを使わなければサイトが作れないなら、DBとか用に、PHPを使っておいた方が良いのでしょうか？

PHPを基本として、ボタン押した時の、キャラの画像に対応したボイスデータをランダムで表示+再生する部分のみ
Javascriptを使う(PHPを使ったサイト内で呼び出す)事は可能なんでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.1ベストアンサー

  • 回答者： lv4u
  • 回答日時：

まあ、書かれた機能があるＷｅｂサイトを作るなら、MySQLなどのデータベース無しで作ることは、通常ありえないと思います。

    • good
    • 1
    • 件
通報する
この回答へのお礼

教えて頂き、有難うございます！
DBは必須なんですね。良い勉強に成りました。感謝です♪(o≧▽゜)o

通報する
お礼日時：2021/06/26 14:23

No.4

  • 回答者： Ogre7077
  • 回答日時：

Web アプリケーションの形態はいろいろあります。



形態1) HTML や画像ファイルを静的に配置したのみの Web サーバー
形態2) PHP 等で実装したサーバー側処理で HTML を生成
形態3) 1 に加え JavaScript で組んだブラウザ側処理で HTML を編集
形態4) ブラウザ側から非同期通信する API をサーバー側に PHP 等で実装

ご提示の要件の場合ですと、操作性の都合で再生処理は 形態3 が必須です。あとはキャラ情報の管理をどのように行うかの設計によりますが、思いつく限り案を出してみます。

案A) 手作業で管理 (形態3のみ)
画像や音声ファイルは 形態1 で配置
再生処理で使用するキャラ一覧情報を、手作業で修正し 形態1 で配置

案B) 手作業だがある程度は自動化して管理 (形態3+α)
画像や音声ファイルは 形態1 で配置
画像や音声ファイルの命名基準を整理し、一覧をバッチ生成可能にする
再生処理で使用するキャラ一覧情報を、バッチ生成し 形態1 で配置

案C) 一覧情報だけデータベース管理 (形態2と3)
画像や音声ファイルは 形態1 で配置
画像と音声ファイルの配置情報をデータベース管理する
キャラ一覧情報を、形態2 でデータベースから出力し HTML に混ぜ込む

案D) すべてをデータベース管理 (形態3と4)
画像と音声も BLOB 型としてデータベース管理する
キャラ一覧情報と画像と音声を 形態4 でデータベースから出力

キャラ一覧情報が3桁程度で収まるならサーバー側の処理が不要の 案B で十分ですが、4桁を超えるなら管理用 CMS の導入と一緒に 案D を検討してください。
    • good
    • 1
    • 件
通報する
この回答へのお礼

丁寧に教えて頂き有難うございます！
形態1と、携帯3が良さそうです！
DBには、
○『ユーザー名』
○『ユーザーのパスワード、メールアドレス』
○『キャラの画像データ』
○『キャラの音声データ』
とかを登録しようかと思います！キャラのデータはDBに保存しないと、呼び出しは不可能なんでしょうか？
ヴィジュアルコードというものでは、ファイルに画像や音声データを入れれば再生出来たのですが、Webアプリはそういう感じにはいかないのでしょうか？
ご教示願いますm(__)m

通報する
お礼日時：2021/06/26 21:02

No.3

  • 回答者： fujillin
  • 回答日時：

No2です



＞キャラクターは2人で、複数の喋るセリフ音源とリンクさせて、
＞表情にあった音声をあらかじめ、まとめといて、～～
キャラクターが2人なら、画像を入れ替えするよりも、両方表示しておいて、メインでない方を暗くするなどの演出もありなのかなと感じました。
「表情に合わせた」とあるので、１枚/1キャラではなくって、1キャラでも複数の画像を切り替えるのかな？
まぁ、それでもキャラの表示位置は固定の方が、わかり易そうな気がしました。

また、音声ファイルがどのくらいの容量になるのかにもよりますが、分解して数が多くなるのなら、全部をまとめてしまって、再生時に部分を切り出して再生するような考え方もできそうに思います。
（パラパラアニメの画像を、大きな1枚の画像から切り出すような要領です。）
画像と違って時間をピッタリには測れないので、つなぎに若干の余裕が必要になるかも知れませんが。

※ 詳細がわからないので、「お礼」を見て、雰囲気としての勝手な感想でした。
    • good
    • 1
    • 件
通報する
この回答へのお礼

提案有難うございます！そういう演出もありですね♪良い参考にさせて頂きます(*≧∀≦*)

通報する
お礼日時：2021/06/26 19:22

No.2

  • 回答者： fujillin
  • 回答日時：

こんにちは



内容の詳細が不明ですけれど、セットの数にもよるのではないのかな？

キャラの数が多くて、キャプションや付属属性（説明等）が各種あるようだとDB利用になるでしょうけれど、単純に、画像と音声ファイルだけで、数もさほどなければ、そのままでも管理は可能でしょう。

以下に、スクリプトで順に再生するごく簡単な例を。
（内容が不明なので、勝手に想定）
・数はさほどないものと仮定し、LIタグにあらかじめ画像と音声の組み合わせて入れておく方式です。
・完全なランダムではなく、表示中のものと違うものが次に選ばれるように制御しています。（ですので2組以上データがないと動作しません）
・音声再生終了後、interval 秒後に次のものに切り替わります。
・全体にSTARTで開始、STOPで停止です。

かなりテキトーなので、雰囲気のみの参考とでも思ってください。
（Chrome、fxで動作確認）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
ul.hoge {
position: relative;
list-style-type: none;
margin:0; padding:0;
}
.hoge li {
position: absolute;
top:0; width: 100%;
text-align: center;
opacity: 0;
transition: all 1.5s;
}
.hoge li.play {
opacity: 1;
z-index: 10;
}
.hoge img {
width:400px; height: 400px;
}
</style>
</head>
<body>

<p><button type="button">STRAT</button></p>
<ul class="hoge">
<li>
<img src="./img/photo01.jpg" alt="" />
<audio src="./sound/sound1.wav" preload></audio>
</li>
<li>
<img src="./img/photo02.jpg" alt="" />
<audio src="./sound/sound2.wav" preload></audio>
</li>
<li>
<img src="./img/photo03.jpg" alt="" />
<audio src="./sound/sound3.wav" preload></audio>
</li>
<li>
<img src="./img/photo04.jpg" alt="" />
</li>
</ul>


<script>
const Player = {
flag : false,
no : -1,
interval : 10,
elms : document.querySelectorAll('.hoge li'),

start : () => {
let p = Player, tmp = p.no, audio;
if(!p.flag) return;
while(tmp == p.no) tmp = Math.random() * p.elms.length | 0;
if(p.no > -1) p.elms[p.no].classList.remove('play');
p.elms[tmp].classList.add('play');
p.no = tmp;
audio = p.elms[tmp].querySelector('audio');
if(audio){
audio.currentTime = 0;
audio.play();
} else {
p.next();
}
},

stop : () => {
let audio = Player.elms[Player.no].querySelector('audio');
if(audio) audio.pause();
},
next : () => {
if(Player.flag) setTimeout( Player.start, Player.interval * 1000);
}
};


if(Player.elms.length > 1){
document.querySelectorAll('ul.hoge audio').forEach(elm => {
elm.addEventListener('ended', Player.next );
});

document.querySelector('button').addEventListener('click', e => {
Player.flag = !Player.flag;
e.target.textContent = Player.flag?'STOP':'START';
if(Player.flag) Player.start(); else Player.stop();
});
};
</script>

</body>
</html>
    • good
    • 2
    • 件
通報する
この回答へのお礼

ありがとう

丁寧にソースコードまで有難うございます！キャラクターは2人で、複数の喋るセリフ音源とリンクさせて、表情にあった音声をあらかじめ、まとめといて、それをランダムに表示したかったんです！
やはり、Javascriptじゃないときびしいですよね？(*^-^*)

通報する
お礼日時：2021/06/26 17:53

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報