循环使用HTML5 [英] Looping in HTML5

问题描述

我对这整个html事情都很陌生。我制作了这个代码，允许我设置2张图片，例如一个开始和一个停止。单击开始时，它还应播放循环音频文件，该文件应在单击停止时停止。

I'm pretty new to this whole html thing. I made this code which allows me to set 2 pictures, e.g. a start and a stop. When 'start' is clicked it should also play a looped audio file which should stop when 'stop' is clicked.

虽然单击停止时音频停止，播放时音频不会循环播放！

Although the audio stops when I click 'stop', the audio does not loop when playing!

帮助会很受欢迎... o

Help would be mucho appreciated...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>

推荐答案

你的代码没问题，我宁可用< a href =http://www.w3schools.com/tags/ref_av_dom.asp =nofollow>音频api

Your code is OK, I'd rather use Audio api

问题在于你的代码，你无法访问onclick事件中的wave对象。让它全球化，你会发现它有效。

The problem in your code, you can't access wave object inside onclick event. Make it global you'll see that works.

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

And here is the better way, with 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！