Как добавить музыку при вращении колеса удачи?

Имеется колесо удачи. При нажатии кнопки вращения, необходимо чтобы играла музыка под названием "music.mp3", а также при выпадении приза, "Поздравляем, вы выиграли:" с этим текстом была тоже музыка. Код колеса оставлю ниже:

const spinWheel = document.getElementById("spinWheel");
const spinBtn = document.getElementById("spin_btn");
const text = document.getElementById("text");
const spinValues = [
  { minDegree: 31, maxDegree: 60, value: "Ноутбук игровой MSI Katana GF76 12UD-263RU" },
  { minDegree: 0, maxDegree: 30, value: "Lush3 + Ridge x 1 + Микрофон HyperX Quadcast S" },
  { minDegree: 61, maxDegree: 90, value: "Беззеркальная камера Canon EOS R50 Body" },
  { minDegree: 331, maxDegree: 360, value: "Lovense Webcam + Domi 2" },
  { minDegree: 301, maxDegree: 330, value: '"Капуста"' },
  { minDegree: 271, maxDegree: 300, value: '"Картошка"' },
  { minDegree: 211, maxDegree: 240, value: "Apple iPhone 15" },
  { minDegree: 241, maxDegree: 270, value: '"Морковь"' },
  { minDegree: 181, maxDegree: 210, value: "Cougar Throne – кресло для геймеров" },
  { minDegree: 151, maxDegree: 180, value: "Сертификат ВБ"  }
];

const size = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
var spinColors = ["#303032", "#303032", "#303032", "#303032", "#303032", "#303032", "#303032", "#303032", "#303032", "#303032", "#303032", "#303032"];

let spinChart = new Chart(spinWheel, {
  type: "pie",
  data: {
    labels: ['1', "2", "3", "4", "5", "6", "7", "8", "9", "10"],
    datasets: [{
      label: 'My first dataset',
      backgroundColor: spinColors,
      data: size,
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    animation: { duration: 0 },
    plugins: {
      tooltip: false,
      legend: { display: false },
      labels: {
        render: 'image',
        images: [
          { src: 'https://img.icons8.com/?size=256&id=MriQFBlbq8Eg&format=png', width: 32, height: 32
          },
          { src: 'https://img.icons8.com/?size=256&id=42920&format=png', width: 32, height: 32 },
          { src: 'https://img.icons8.com/?size=256&id=55175&format=png', width: 32, height: 32 },
          { src: 'https://img.icons8.com/?size=256&id=gLlz1TOwC0XY&format=png', width: 32, height: 32 },
          { src: 'https://img.icons8.com/?size=256&id=wf2k97WdJPnp&format=png', width: 32, height: 32 },
          { src: 'https://img.icons8.com/?size=256&id=46391&format=png', width: 32, height: 32 },
          { src: 'https://img.icons8.com/?size=256&id=97106&format=png', width: 32, height: 32 },
          { src: 'https://img.icons8.com/?size=256&id=SQRJ1yReLQGy&format=png', width: 32, height: 32 },
          { src: 'https://img.icons8.com/?size=256&id=42911&format=png', width: 32, height: 32 },
          { src: 'https://img.icons8.com/?size=256&id=42926&format=png', width: 32, height: 32 },
        ]
      },
    },
  },
});
const generateValue = (angleValue) => {
  for (let i of spinValues) {
    if (angleValue >= i.minDegree && angleValue <= i.maxDegree) {
      text.innerHTML = `<p>Поздравляем, вы выиграли: <br> ${i.value} ! </p>`;
      spinBtn.disabled = false;
      break;
    }
  }
};
let count = 0;
let resultValue = 101;
spinBtn.addEventListener("click", () => {
  spinBtn.disabled = false;
  let randomDegree = Math.floor(Math.random() * (355 - 0 + 1) + 0);
  let rotationInterval = window.setInterval(() => {
    spinChart.options.rotation = spinChart.options.rotation + resultValue;
    spinChart.update();
    if (spinChart.options.rotation >= 360) {
      count += 1;
      resultValue -= 5;
      spinChart.options.rotation = 0;
    } else if (count > 15 && spinChart.options.rotation == randomDegree) {
      generateValue(randomDegree);
      clearInterval(rotationInterval);
      count = 0;
      resultValue = 101;
    }
  }, 10);
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://unpkg.com/chart.js-plugin-labels-dv/dist/chartjs-plugin-labels.min.js"></script>


Ответы (1 шт):

Автор решения: Опан

В начале скрипта объявляем:

const audio = new Audio("music.mp3");

После строки

spinBtn.addEventListener("click", () => {

вставляем:

audio.play();

Появится музыка во время вращения. А после строки

text.innerHTML = `<p>Поздравляем, вы выиграли: <br> ${i.value} ! </p>`;

вставляем:

audio.currentTime = 0;
audio.play();

Появится музыка во время поздравления.

→ Ссылка