UPDATE-1

Question

我对这整个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>

Answer 1

您应该使用audio element而不是嵌入。

查看它的api - 有一个“循环”属性，好吧，循环。

为了确定要显示的图像，您必须收听音频元素的播放，暂停等事件。

Answer 2

您的代码没问题，我宁愿使用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');

这是DEMO

UPDATE-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();
        }
    }
}

UPDATE-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();
        }
    }
}

循环使用HTML5

2 个答案:

UPDATE-1

UPDATE-2