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 - 有一个用于循环的“循环”属性。

为了确定显示哪个图像，您必须监听音频元素的play、pause等事件。

于 2013-04-10T21:48:42.730 回答
0

你的代码没问题，我宁愿使用Audio 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 回答