Wordcloud sonification - tones

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/wordcloud.js"></script>
<script src="https://code.highcharts.com/modules/sonification.js"></script>

<div id="container"></div>
<button id="play">Play me</button>

<pre id="text" style="display:none">
design concept proposal object process system word design refers something intentionally created thinking agent sometimes used refer inherent nature something design verb design expresses process developing design cases direct construction object without explicit prior plan considered design arts crafts design expected have purpose certain context usually satisfy certain goals constraints take account aesthetic functional economic environmental socio political considerations traditional examples designs include architectural engineering drawings circuit diagrams sewing patterns tangible artefacts business process models designing people produce designs called designers term designer usually refers someone works professionally one various design areas professions word designer generally qualified area practice example fashion designer product designer web designer interior designer designate practitioners architects engineers designer sequence activities produce design called design process
</pre>

CSS

#container {
    min-width: 220px;
    max-width: 400px;
    height: 300px;
}

JavaScript

const wordsToInclude = 40,
  text = document.getElementById("text").textContent,
  lines = text.replace(/[():'?0-9]+/g, "").split(/[,\. ]+/g),
  data = Object.entries(
    lines.reduce((acc, cur) => {
      acc[cur] = (acc[cur] || 0) + 1
      return acc
    }, {}),
  )
    .sort((a, b) => b[1] - a[1])
    .slice(0, wordsToInclude)

const chart = Highcharts.chart("container", {
  series: [
    {
      type: "wordcloud",
      name: "Occurrences",
      data,
      rotation: {
        to: 0,
      },
    },
  ],
  title: {
    text: "Wordcloud of Wikipedia's article on Design",
    align: "left",
  },
  subtitle: {
    text: `An excerpt, top ${wordsToInclude} words included`,
  },
})

document.getElementById("play").onclick = () => {
  const instruments = [
      ["piano", "vibraphone", "flute", "plucked"], // small
      ["lead", "saxophone", "trumpet"], // large
    ],
    maxWeight = Math.max(...data.map((d) => d[1]))

  chart.series[0].points.forEach((p, i) => {
    const valFactor = p.weight / maxWeight,
      instrs = instruments[Math.round(valFactor)]
    chart.sonification.playNote(
      instrs[i % instrs.length],
      {
        volume: valFactor,
        note: 70 - Math.round(valFactor * 34),
        noteDuration: 400 * valFactor,
        pan: Math.random() * 2 - 1,
      },
      Math.random() * 4000,
    )
  })
}