我正在努力让朋友成为音板应用程序。用户界面将有一个4 x 5(或更多)网格系统,各种面孔都是.png格式,一旦点击,就会播放音频文件。
我不确定如何制作一个对象构造函数,它为一个对象提供一个带有指定声音文件的onclick函数。
我的目标是使用我的makeNewFace()
函数来构建对象,为其提供图像值,声音文件值以及播放所述声音文件的自动onclick功能。
最后,我想将该对象推送到我的faceArray,它将自动显示在我的index.html
文件上,作为.png
面,并带有指定的onclick函数来播放其匹配的声音文件。
我希望我有道理。
//objects array with an image, sound, and string saying
faceArray = [
{ image: 'numbaniFace.png',
sound: 'numbaniSaying.mp3',
saying: 'Nooombaniii'
},
{ image: 'stanfordFace.png',
sound: 'stanfordSaying.mp3',
saying: 'Stanford Alumni'
}
];
function makeNewFace(image, sound, saying){
this.image = image;
this.sound = sound;
this.saying = saying;
var newImg = document.createElement('img');
newImg.setAttribute('src', image);
newImg.setAttribute('onclick', playSound(sound));
}
function playSound(){
//????
}
答案 0 :(得分:0)
您可能会尝试将其设为
function MakeNewFace(img, snd, saying){
this.image = img;
this.sound = new Audio(snd);
this.saying = saying;
this.newImg = document.createElement('img');
this.newImg.setAttribute('src', this.image);
this.newImg.addEventListener("click", this.sound.play.bind(this.sound));
}
var face = new MakeNewFace("http://metiscappadociatours.com/wp-content/uploads/2015/10/butterfly-balloons1.jpg","http://www.vibrationdata.com/Petrov_D.mp3","hey..!"),
myDiv = document.getElementById("myDiv");
myDiv.appendChild(face.newImg);

img {
margin: 0 5% 0;
max-width: 90%;
max-height: 100%;
}

<div id="myDiv"></div>
&#13;