javascriptで、document.getElementByIdで”発音ボタン”の絵を表示させ、そこをクリックしたら発音させようとしています。（１回目は、ボタンをクリックしなくても、すぐ音がなるようにして、さらにボタンをクリックすると何度も発音が聞けるようにしたい）

あくまで、btnをクリックしたときにfunctionに飛ばすという形にしないとだめなのですね

こんなふうに、IMG を差し込む先が BUTTON じゃなければきちんと動くんですよね...

<script>
var s="<img src='sozai/speaker.png' onclick='hatuon()'>"
document.getElementById("sound-button").innerHTML = s;
</script>

<div id="sound-button"></div>

BUTTON だからダメっぽくて、IE と FireFox がダメで、Chrome なら BUTTON でも動きました。
それが何故なのかは ぼくも分からんです　X-|

質問の補足を受けて。

var s="<img src="./sozai/seikai/gif">;
document.getElementById("buttons[kotaelabel]").innerHTML = s;

このようにしてみたのですが、うまく動いてくれません。

「うまく動いてくれない」というのは、ボタンが大きくなっちゃうか、ボタンのサイズを指定してるから画像が見えないか、のどちらかですよね。
あるタグの内側にくるタグは、そのタグの内側に表示されるのが基本です。
自由な位置に表示するには、position というスタイルを absolute にする必要があります。
例えば、こんな感じ。innerHTML でも書けますが、設定するものが多いので DOM での例です。

    var btn = document.getElementById(buttons[kotaelabel]);
    var img = document.createElement("IMG");
    img.src = "./sozai/seikai/gif";
    img.style.position = "absolute";
    img.style.top = (btn.offsetTop - 30);   // 高さ位置を調整
    img.style.left = (btn.offsetLeft - 30); // 左右の位置を調整
    btn.appendChild(img);
//  document.body.appendChild(img);     // body にぶら下げても良い

新規に作った「○」の IMG は、位置を指定しているのでボタンの子要素じゃなくても構いません。

この btn.appendChild(img);という部分で指定した絵を表示するのでしょうか？

そうです。
btn の子要素に img を指定したタイミングで表示されるはずです。

// document.body.appendChild(img); // body にぶら下げても良い
↑の部分は//で、無視されていますが、不要ということでしょうか？

そうです。
btn.appendChild(img);
か
document.body.appendChild(img);
のどちらか一方で OK です。

//正解に○をつける
var buttons = document.getElementsByTagName("button");
buttons[kotaelabel].style.backgroundColor = "#FFBEDA";//ボタンの背景
buttons[kotaelabel].style.color = "#FF0000";//文字の色

var btn = document.getElementById(buttons[kotaelabel]);

ここの最後が間違っていますね。
getElememtById に指定するのは ID なので、buttons[kotaelabel].id です。

var btn = document.getElementById(buttons[kotaelabel].id);