1

私はこのhtml全体にかなり慣れていません。開始と停止など、2 つの画像を設定できるこのコードを作成しました。「開始」をクリックすると、ループ オーディオ ファイルも再生され、「停止」をクリックすると停止します。

「停止」をクリックすると音声が停止しますが、再生時に音声がループしません!

助けていただければ幸いです... o

これは頭​​の中にあります：

<script type="text/javascript">

function imageSwitch(_imgID,_imgStart,_imgStop,_soundFile) {
this.imgID = _imgID;
this.imgStart = _imgStart;
this.imgStop = _imgStop;
this.soundFile = _soundFile;

this.pos = 0;
this.e;

this.change = function() {
if(this.pos == 0) {
this.pos = 1;
document.getElementById(this.imgID).src = this.imgStop;

this.e = document.createElement('embed');
this.e.setAttribute('src','https://dl.dropbox.com/u/39640025/MP3/Waves.mp3');
this.e.setAttribute('id','sound'+this.imgID);
this.e.setAttribute('hidden','true');
this.e.setAttribute('autostart','true');
this.e.setAttribute('loop','true');

document.body.appendChild(this.e);
} else {
this.pos = 0;
document.getElementById(this.imgID).src = this.imgStart;
this.e.parentNode.removeChild(this.e);
}
}
}

これも頭の中にあります：

var wave = new imageSwitch('btn1','https://dl.dropbox.com/u/39640025/OMAA/Waves2PNG.png','https://dl.dropbox.com/u/39640025/OMAA/Active/Waves%20Active%20PNG.png','https://dl.dropbox.com/u/39640025/MP3/Waves.mp3');

これは本体にあります：

<div style="position: absolute; left: 10px; top: 60px;"><img src="https://dl.dropbox.com/u/39640025/OMAA/Waves2PNG.png"
                             width="331" height="96" border="0" alt="one" onClick="wave.change()" id="btn1" /></div>
4

2 に答える 2

0

あなたのコードは問題ありません。オーディオ APIを使用したいのですが

コードの問題です。onclick イベント内で wave オブジェクトにアクセスできません。グローバルにすると、それが機能することがわかります。

wave = new imageSwitch('btn1','https://dl.dropbox.com/u/39640025/OMAA/Waves2PNG.png','https://dl.dropbox.com/u/39640025/OMAA/Active/Waves%20Active%20PNG.png','https://dl.dropbox.com/u/39640025/MP3/Waves.mp3');

ここにデモがあります

更新-1

そして、これがAuido Object、DEMOを使用したより良い方法です

function imageSwitch(_imgID, _imgStart, _imgStop, _soundFile) {
    this.imgID = _imgID;
    this.imgStart = _imgStart;
    this.imgStop = _imgStop;
    this.soundFile = _soundFile;
    this.song = new Audio(this.soundFile);
    this.song.loop = true;
    this.pos = 0;
    this.e;

    this.change = function () {
        if (this.pos == 0) {
            this.pos = 1;
            document.getElementById(this.imgID).src = this.imgStop;
            this.song.play();
        } else {
            this.pos = 0;
            document.getElementById(this.imgID).src = this.imgStart;
            this.song.pause();
        }
    }
}

更新-2

クロスブラウザの場合、別のソースDEMOを定義する必要があります

wave = new imageSwitch('btn1', 'https://dl.dropbox.com/u/39640025/OMAA/Waves2PNG.png', 'https://dl.dropbox.com/u/39640025/OMAA/Active/Waves%20Active%20PNG.png', 'https://dl.dropbox.com/u/39640025/MP3/Waves.mp3','https://dl.dropboxusercontent.com/u/39640025/OGG/Waves.ogg');

function imageSwitch(_imgID, _imgStart, _imgStop, _soundFileMp3, _soundFileOgg) {
    this.imgID = _imgID;
    this.imgStart = _imgStart;
    this.imgStop = _imgStop;
    this.song = new Audio();
    if (this.song.canPlayType("audio/mpeg"))
        this.song.src = _soundFileMp3;
    else 
        this.song.src = _soundFileOgg;
    this.song.loop = true;

    this.pos = 0;
    this.e;

    this.change = function () {
        if (this.pos == 0) {
            this.pos = 1;
            document.getElementById(this.imgID).src = this.imgStop;
            this.song.play();
        } else {
            this.pos = 0;
            document.getElementById(this.imgID).src = this.imgStart;
            this.song.pause();
        }
    }
}
于 2013-04-10T21:57:18.987 に答える
0

埋め込みの代わりにオーディオ要素を使用する必要があります。

そのAPIをチェックしてください-ループ用の「ループ」属性があります。

表示する画像を決定するには、オーディオ要素のplay、pauseなどのイベントをリッスンする必要があります。

于 2013-04-10T21:48:42.730 に答える