電子書籍の厳選無料作品が豊富!

現在、サイト制作をしており、以下の機能を全て実装したいです。
・ボタンを押すと、キャラクター画像と、それに合った音声データが、ランダムで再生される。
・定期的に(5分ごと等)キャラと画像が、同時にランダム表示とランダム再生される。
(事前に画像とセリフをリンクさせて、キャラクターの表情に合った音声を再生したい)

この2つの機能は、PHPやCSSでは不可能でしょうか?Javascriptでなければ無理でしょうか?

A 回答 (2件)

スクリプトを使わない実装ならば、



ボタンを押す
→ ページ更新または遷移
→ 音声を自動再生するページ表示

とすれば実現できますが、
昨今は音声の自動再生が制限されているので、実用的ではありません。

素直にスクリプトにて再生機能を実装しましょう。

ページ初期化時に一定間隔の呼び出し(setInterval)を設定
ボタンを押してイベント発生 または 一定間隔の呼び出し発生
→ JS にて <audio> と <img> を新たに作成
→ JS にて <audio> を再生させる

参考:
https://developer.mozilla.org/ja/docs/Web/Media/ …
https://developer.mozilla.org/ja/docs/Web/API/Wi …
https://developer.mozilla.org/ja/docs/Web/HTML/E …
https://developer.mozilla.org/ja/docs/Web/API/HT …
    • good
    • 1
この回答へのお礼

詳しい説明と参考URL有難うございます?やはり、PHPには向かない機能なんですね。ハッキリ言って頂いて助かりました!おとなしくJavascriptを勉強します♪(*≧∀≦*)

お礼日時:2021/06/26 12:37

こんにちは



>Javascriptでなければ無理でしょうか?
Javascriptを利用すれば普通にできると思いますけれど…

まったく使わないで実現するとなると、PHP側でランダムな1セットを出力するようにしておいて、refresh等を利用して一定時間毎にリロードする方法が考えられそうに思います。
ただし、新規の画像や音声ファイルのロードに若干の時間がかかる(一旦キャッシュされてしまえば問題ありませんけれど)のと、リロードなのでチラつきが生じる可能性がありそうに思います。
(iframeなどにしておけば、改善されるかも)

一番のネックとなりそうなのは、audioの自動実行はブラウザにブロックされる可能性が高いことでしょうか。
https://developer.mozilla.org/ja/docs/Web/Media/ …

スクリプト利用の場合は、この点についても
>・ボタンを押すと、~~
で、解決することができます。
というか、「ボタンを押すと、~~」というUIを想定している時点で、スクリプトの使用を前提にしているように感じられますけれど。
    • good
    • 1
この回答へのお礼

有難うございます!PHPで実現するには無理が生じる訳ですね。おとなしく、javarcriptを勉強します!
回答して頂き、有難うございます♪また、次も宜しくお願いします(*≧∀≦*)

お礼日時:2021/06/26 12:16

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