{"id":1552,"date":"2018-12-28T08:03:35","date_gmt":"2018-12-28T07:03:35","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=1552"},"modified":"2018-12-30T05:58:56","modified_gmt":"2018-12-30T04:58:56","slug":"musik-sichtbar-machen-der-wavesurfer","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2018\/12\/28\/musik-sichtbar-machen-der-wavesurfer\/","title":{"rendered":"Musik sichtbar machen: der Wavesurfer"},"content":{"rendered":"

Ich habe an den Feiertagen ein bisschen mit Audio\/Multimedia rumgespielt, und bin da auf ein sehr h\u00fcbsches Skript gestossen, den wavesurfer.js<\/a>. Er erm\u00f6glicht die Darstellung einer wav-Datei als Frequenzkurve, die beim Abspielen der Musik animiert durchlaufen wird. Das sieht dann zum Beispiel so aus:<\/p>\n

\"peters_roll_screenshot\"

peters_roll_screenshot<\/p><\/div>\n

Die Animation l\u00e4uft synchron zur Musik, das Layout ist fully responsive – eine sehr h\u00fcbsche Angelegenheit!<\/p>\n

Die Implementierung ist denkbar einfach, man bindet das Skript ein:<\/p>\n

<script src=\"https:\/\/unpkg.com\/wavesurfer.js\"><\/script><\/pre>\n
Dann kann man schon loslegen. Man braucht nur eine Div, in die der wavesurfer-Output geschrieben werden kann, und einen Button zum Starten:<\/p>\n
<input type=\"button\" value = \"Abspielen\" onclick = \"play()\" >\r\n<div id=\"waveform\"><\/div><\/pre>\n
Die Function play sieht dann Beispielsweise so aus:<\/p>\n
function play(){\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0var wavesurfer = WaveSurfer.create({\r\n\u00a0\u00a0\u00a0 container: '#waveform',\r\n\u00a0\u00a0\u00a0 waveColor: 'yellow',\r\n\u00a0\u00a0\u00a0 progressColor: 'blue',\r\n\u00a0   });<\/pre>\n
Man legt eine neue Instanz von WaveSurfer auf eine Variable, und stellt die Ausgabe-div und die Farbe ein. Mit der Variablen kann man dann weiterarbeiten:<\/p>\n
wavesurfer.load('musik.wav');\r\n\r\nwavesurfer.on('ready', function () {\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0wavesurfer.play();\r\n\u00a0\u00a0 \u00a0var dauer = wavesurfer.getDuration();\r\n\u00a0\u00a0 \u00a0console.log(\"Dauer:\"+dauer);\r\n\u00a0\u00a0 \u00a0\r\n}); \/\/Ende von play()<\/pre>\n
Die Wav-Datei muss erst vollst\u00e4ndig geladen sein, ehe die Animation loslegen kann, deswegen erst den load, dann die Statusabfrage\u00a0 wavesurfer.on(‚ready’…, die Musik wird erst gestartet wenn der ready-Event z\u00fcndet. Ich hab hier gleich mal noch ein bisschen gespielt und gebe mir die Dauer des Musikst\u00fccks in der Konsole aus, das funktioniert mit dem .getDuration().<\/p>\n
Hier habe ich eine kleine Demoversion gebastelt, der Trommelwirbel stammt von meinem Lieblingscousin:<\/p>\n
https:\/\/evileu.de\/demos\/wavesurfer_min.html<\/a><\/p>\n
Mehr zu den Wavesurfer-Methoden gibts hier:<\/p>\n
https:\/\/wavesurfer-js.org\/docs\/methods.html<\/a><\/p>\n
Die Doku ist zwar sehr knapp gehalten, aber das N\u00f6tigste findet man schnell heraus, und es gibt auch einige h\u00fcbsche Plugins. Ein gelungene Sache, finde ich – und ausbauf\u00e4hig!<\/p>\n","protected":false},"excerpt":{"rendered":"
Ich habe an den Feiertagen ein bisschen mit Audio\/Multimedia rumgespielt, und bin da auf ein sehr h\u00fcbsches Skript gestossen, den wavesurfer.js. Er erm\u00f6glicht die Darstellung einer wav-Datei als Frequenzkurve, die beim Abspielen der Musik animiert durchlaufen wird. Das sieht dann zum Beispiel so aus: Die Animation l\u00e4uft synchron zur Musik, das Layout ist fully responsive […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[47,66,8,63],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1552"}],"collection":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/comments?post=1552"}],"version-history":[{"count":7,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1552\/revisions"}],"predecessor-version":[{"id":1561,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1552\/revisions\/1561"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=1552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=1552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=1552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}