In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
<div style="background-color:#C0F1B0">
## Todo:
the list is in order Tenetene (also tara) vagina Body parts is not read by the narrator. I guess it's a cultural thing.
Having issues with embedding, I think it's because the waveSurfer isn't working well with the iframe.
there are issues with formatting in firefox, which I will ignore for now.
---
I need to refactor the code as I could do it using a loop or d3's .data()
Long lines of text are truncated, I think there is some svg text attribute to wrap text
errors Kai is twice in the audio sample.
Kai (65)
67 Mania isn't there.
other thoughts
It might be better to write this using html?
Would like to look at breaking words into their sounds, so the parts of the words show the letters that make the sounds.
Look at making a word cloud based of the 100 words contect. When the words there are clicked they play the sound and also show the english description.
<br>
regionsJSON = { // for saving region data
let regs = []
for (let index = 0; index < regies.length; index++) {
regs.push({
start: wavesurfer.regions.list[regies[index]].start,
end: wavesurfer.regions.list[regies[index]].end,
loop: false,
drag: false,
resize: false
})
}
return regs
}
regies = Object.keys(wavesurfer.regions.list) // should not start playing.. I have to stop playing and then return regies to fix bug
// it plays the first region in the list. I could add an empty region or do the above.
playSpeed_function = // update volume level
wavesurfer.setPlaybackRate(playSpeed)
zoom_function = // update zoom level
wavesurfer.zoom(zoom)
wavesurfer.on('region-click', function(region, e) {
e.stopPropagation();
region.loop = false; // set region to not loop by default
// if ctrl key pressed delete region
// Play on click and Play_loop on shift click
e.ctrlKey ? region.remove() : e.shiftKey ? region.playLoop() : region.play();
});
wavesurfer.on('region-created', function(region, e) {
region.color = 'rgba(0, 200, 0, 0.1)'
});
// wavesurfer.un('region-created', function(region, e) { // remove event
// region.color = 'rgba(0, 200, 0, 0.1)'
// });
wavesurfer.regions.list
wavesurfer.regions.list[regies[0]].play()
// wavesurfer.clearRegions()
controlButtons = {
d3.select('#playb').on('click',() => wavesurfer.playPause())
d3.select('#pauseb').on('click',() => wavesurfer.pause())
d3.select('#stopb').on('click',() => wavesurfer.stop())
}
wavesurfer = {
d3.select('#wavDiv > wave').remove() // delete the wave displayed in the div to prevent doubleup on reload after changes
let ws = WaveSurfer.create({
container: '#wavDiv',
waveColor: '#048BA8',
progressColor: '#F2CE4C',
cursorColor: '#A4036F',
cursorWidth: 1,
height: 300,
scrollParent: true,
plugins: [
cursor.create({
showTime: true,
opacity: 1,
customShowTimeStyle: {
'background-color': '#004', // can't use alpha channel rgba(0, 0, 4, 0.2) as the text doesn't get complely cleared
color: '#ffa',
padding: '2px',
'font-size': '12px'
}
}),
regions.create({
regionsMinLength: 0.5,
regions: teRegions
//
,
dragSelection: {
slop: 5
}
})
]
});
ws.load(audioURL)
return ws}
audioURL = await FileAttachment("words.mp3").url()
FileAttachment("mania.mp3")
teRegions = FileAttachment("regionsJSON (1).json").json()
reo = FileAttachment("100 Māori words@4.tsv").tsv()
viewof table = Inputs.table(reo, {})
WaveSurfer = require("https://unpkg.com/wavesurfer.js/dist/wavesurfer.js")
regions = require("https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.regions.js")
cursor = require("https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.cursor.js")
svg_w = width
svg_h = Math.ceil(width/2)
// number of rows we can fit on a screen
row = {
let r = [];
let s = (textSize('M').height*1.5) // font height in pixels + padding
for (let y = 0; y < ~~(svg_h / s); ++y) {
r.push(~~(y*s))
}
return r
}
rowSize = (textSize('M').height)
wordSizes = { // maybe I don't need the height
svg_w // run if screen size changes
let ws = []
for (let i = 0; i < reo.length; ++i) {
ws.push(textSize(reo[i].Māori,'words'))
}
return ws
}
// returns a random word and and array for 5 random words including the test word
mutable word = pickWords()
function pickWords()
{
let w = randomWord() // our random word
let otherWords = []
otherWords.push(w)
for (let i = 0; i < 4; ++i) {
otherWords.push(pick(otherWords))
}
d3.shuffle(otherWords)
return {word:w, otherWords}
}
function pick(numbers){
let p = randomWord()
return (numbers.includes(p))? pick(numbers) : p
}
nextWord = textSize('Next Word')
randomWord = d3.randomInt(0, reo.length)
// https://developer.mozilla.org/en-US/docs/Web/API/SVGTextContentElement
// .getRotationOfChar(1)
// .getExtentOfChar(0) // returns a SVG rect object fo the charaters dimentions { height: ,width: ,x: ,y: }
// .getSubStringLength(0,4) // get the length of sub string
// .getEndPositionOfChar(4)
// .getStartPositionOfChar(4)
// .getNumberOfChars()
// .getExtentOfChar(0)
function textSize(text) {
let testIt = d3.select('body').append('svg');
testIt.append('text')
.style('font-family','sans-serif')
.style('font-size', '42px')
.text(text);
let sel = testIt.selectAll('text').node()
let width = sel.getComputedTextLength()
let height = sel.getExtentOfChar(0).height
testIt.remove()
return {width, height}
}
// based on: https://gist.github.com/huytd/327e453c95ca3edadb32d0c867e2561b
textSize('Marae','words')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
