Как сделать конструктор объекта, который назначает пару ключ-значение с помощью функции onclick

Question

Я пытаюсь сделать из друга приложение для деки. Пользовательский интерфейс будет иметь сетку размером 4 x 5 (или более) с различными гранями в формате.png, который после включения будет воспроизводить аудиофайл.

Я не уверен, как сделать конструктор объекта, который дает объекту функцию onclick с назначенным звуковым файлом.

Моя цель - использовать мой makeNewFace() функция для создания объекта, присвоения ему значения изображения, значения звукового файла и функции автоматического включения для воспроизведения указанного звукового файла.

Наконец, я хочу поместить этот объект в мой 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(){
    //????
}

Answer 1

Возможно, вы попытаетесь сделать это как

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>