重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

おしえて

Dreamweaverで音をボタンで出るようにしたい

解決済

  • 質問者：westchester
  • 質問日時：
  • 回答数：3件

現在、Dreamweaverでサイト作りをしています。短い音を.wavファイルで置いてこれにリンクすると黒い画面に変わってから音が出ます。色々な音を出したいので、この方法では煩わしいです。

サイトを探していたら以下の画面を見つけました。この画面のように、音をボタンのクリックで出るようにするにはどうしたら良いのでしょうか。
http://www.kecl.ntt.co.jp/IllusionForum/a/missin …

質問者からの補足コメント

  • うーん・・・

    fujillinさん、

    書いていただいたスクリプトを真似してうまくいきました。「ボタン」は正方形で現れますが、これに替えて、作図したスピーカーのアイコンをボタンとして表示するにはどうしたら良いのでしょうか。よろしくお願いいたします。

      補足日時：2017/07/27 05:26
    通報する

  • fujillinさん、さっそくのご回答をありがとうございました。何年も自己流でサイトを作ってきましたが、Dreamweaverの範囲内だけで、スクリプト言語を全く使えないことがよくわかりました。Adobe Flashは持っているのでFlashやJavaScriptをインターネットで勉強しようとしましたが、基礎がないので時間ばかりかかります。

    今回の質問に関しても、スクリプトを書いていただいても文法を知らないので応用が利きません。勉強し直します。今回は相談にのっていただきありがとうございました。

    現在作業中のことを付記します。サイトはここです。
    http://www.tmoritani.com/Science/MyPhysicsDiary. …

    （今スピーカーの絵で音を出しているのを改良したいのです。今後は、基礎から勉強し直します。）

      補足日時：2017/07/27 20:04
    通報する

  • HAPPY

    fujillinさん、
    ご教示いただいたスクリプトを使って、目的のものができました！！！
    とても嬉しいです。
    今回は、HTMLについて基本中の基本も学びました。
    1.　最新のHTML5は、<DOCTYPE HTML>で良い。
    2.　元の<a her ="音源ファイル"><img src="画像">という構造を生かしてscriptを作成していただいたので本体を直すところがなくとても助かりました。
    スクリプトの文法はまだわかりませんので、次の３冊の本を手配しました。
    "Flash", "Flash Catalyst", "JavaScript"　("Catalyst"はすでに発売停止のようですが、CS5のセットの一つとして保有していますので。）

    この３日ほどの泥沼状態から抜け出すことができました。心から感謝申し上げます。

    No.3の回答に寄せられた補足コメントです。 補足日時：2017/07/28 23:12
    通報する

  • うれしい

    fujillinさん、
    ご教示いただいた情報から、.wavファイルは.mp3ファイルに変換します。

      補足日時：2017/07/28 23:29
    通報する
通報する

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

質問の本文を隠す

A 回答 (3件)

参考程度に

No.1ベストアンサー

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

こんにちは



ご提示のサイトではAdobe社のFlashを利用しているようです。

一方、最近のHTML5であればaudioタグがサポートされていますので、Flash等を利用しなくても音を再生することは可能です。
audio要素でcontrolsを表示させておけば、そのままで、ユーザはこれを利用して再生、停止、音量調節などの操作ができます。
https://developer.mozilla.org/ja/docs/Web/HTML/E …


＞音をボタンのクリックで出るようにするにはどうしたら～～
コントロールではなく、何らかのボタンのクリックで音が出るようにするには、「クリックしたら対応する音源を再生する」といった処理を行う必要があり、javascript等を利用することで可能となります。
https://developer.mozilla.org/ja/docs/Web/API/HT …
https://developer.mozilla.org/ja/docs/Web/API/We …

以下、ごく簡単な一例です。
※ 音源は以下のサイトさまのものを利用させていただいていますが、直リンしていますのでお気を付けください。（また、この掲示板ではURLがリンクに変換されてしまいますのでご注意ください）
http://www.tam-music.com/
※ 「valueがplayとなっているボタンをクリックすると、その兄弟要素のaudio要素を再生する」という例です。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
li{ display:inline-block; margin: 0.5em; }
</style>

<script type="text/javascript">
document.addEventListener("click", function(evt){
var t = evt.target;
if(t.nodeName=="BUTTON" && t.value=="play"){
var audio = t.parentNode.getElementsByTagName("audio")[0];
if(audio) audio.play();
}
}, false);
</script>
</head>
<body>

<ul>
<li>
<button type="button" value="play">音1</button>
<audio>
<source src="http://www.tam-music.com/se/phrase/mp3/jingle18. … type="audio/mp3">
</audio>
</li>
<li>
<button type="button" value="play">音2</button>
<audio>
<source src="http://www.tam-music.com/se/phrase/mp3/jingle21. … type="audio/mp3">
</audio>
</li>
<li>
<button type="button" value="play">音3</button>
<audio>
<source src="http://www.tam-music.com/se/phrase/mp3/jingle25. … type="audio/mp3">
</audio>
</li>
</ul>

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

fujillinさん、
さっそくご丁寧な説明をありがとうございました。具体的なスクリプト例まで書いていただき感謝しています。Adobe FlashとJavaScriptを学び始めました。これを機にわかりやすいサイト作りをしていきたいです。

通報する
お礼日時：2017/07/25 12:05

No.3

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

ANo1、2です。



ご提示のサイトでは。必ず
<a her="音源ファイル"><img src="スピーカ画像"></a>
という構造になっていると思われますので、そのような形式の場合に、audio要素を利用してブラウザ上で再生するというスクリプトを作成してみました。

ただし、ブラウザによってサポートしている音声フォーマットが異なるようですのでご注意ください。
（例えば、IE11ではwavファイルをサポートしていません）
http://caniuse.com/#search=audio
https://developer.mozilla.org/ja/docs/Web/HTML/S …


※ 以下は、ご提示のサイトから一部分を抜き出したものでテストしていますが、もとのソースはHTML5では作成されていないようですので、HTML5として宣言し直しています。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){
var speaker = "7723_Speaker.gif"; //←画像ファイル名（チェック用）
var re = new RegExp(speaker + "$");

var audio = document.createElement("audio");
audio.autoplay = true;
document.body.appendChild(audio);

document.addEventListener("click", function(evt){
var t = evt.target;
if(t.nodeName=="IMG" && re.test(t.src)){
var a = t.parentNode;
if(a.nodeName == "A"){
var sound_sorce = a.getAttribute("href");
audio.src = sound_sorce;
evt.preventDefault();
}
}
}, false);
}, false);
</script>
</head>
<body>

<table width="58" border="1">
<tr><td rowspan="9"><img src="images3/7723_WaveForm-1.gif" width="448" height="624" alt="1" /></td>
<td><p><img src="images3/7723_S-Transparent.gif" width="37" height="43" alt="3" /></p></td>
</tr>
<tr>
<td><p><a href="WAV/Do-1.wav"><img src="images3/7723_Speaker.gif" width="26" height="26" alt="1" /></a></p></td>
</tr>
<tr>
<td><p><a href="WAV/Do-2.wav"><img src="images3/7723_Speaker.gif" width="26" height="26" alt="1" /></a></p></td>
</tr>
<tr>
<td><p><a href="WAV/Do-3.wav"><img src="images3/7723_Speaker.gif" width="26" height="26" alt="1" /></a></p></td>
</tr>
<tr>
<td><p><a href="WAV/Do-4.wav"><img src="images3/7723_Speaker.gif" width="26" height="26" alt="1" /></a></p></td>
</tr>
<tr>
<td><p><a href="WAV/Do-5.wav"><img src="images3/7723_Speaker.gif" width="26" height="26" alt="1" /></a></p></td>
</tr>
<tr>
<td><p><a href="WAV/Do-6.wav"><img src="images3/7723_Speaker.gif" width="26" height="26" alt="1" /></a></p></td>
</tr>
<tr>
<td><p><a href="WAV/Do-7.wav"><img src="images3/7723_Speaker.gif" width="26" height="26" alt="1" /></a></p></td>
</tr>
<tr>
<td><p><a href="WAV/Do-8.wav"><img src="images3/7723_Speaker.gif" width="26" height="26" alt="1" /></a></p></td>
</tr>
</table>
</body>
</html>
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.2

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

ANo1です。



＞これに替えて、作図したスピーカーのアイコンをボタンとして
＞表示するにはどうしたら良いのでしょうか。
アイコンというからには画像なのでしょうから、ボタンを画像に変えて、「ボタンをクリックしたら～～」としているスクリプトを「画像をクリックしたら～～」に修正すればよいはずです。

＞スクリプトを真似してうまくいきました。
…とのことなので、どこまで提示したものと同じ内容なのかがわかりませんが、変えている部分があればそれに関しても配慮する必要があるかもしれません。


一方で、ボタンを画像として見えるようにする方法は何種類か考えられます。
簡単に思いつくのは、
1）ボタン要素を画像要素に置き換える（上述の方法）
2）<button><img src=～～ /></button> のように画像要素を追加
3）CSSでボタンの背景画像として画像を表示
　button {
　　width:32px; height:32px; border:none;
　　background-image:url(./icon.gif);

　}
などでしょうか。

1）、2）の方法では文書の構造が変わっていますので、スクリプトもそれに応じた修正が必要になります。
3）の方法は構造は同じままで見え方を変えているだけなので、他の部分の修正はなくても動作するはずと思います。
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報