Add code block example

README.md

@@ -20,6 +20,43 @@ Note: Uses ResizeObserver. Polyfill it on your end.
 
 ## Usage
 
-Install audio-visualiser via npm or import it in your ES module supported browser with `import 'https://unpkg.com/audio-visualiser?module';`
+Install audio-visualiser via npm or import it in your ES module supported browser with `import 'https://cdn.skypack.dev/audio-visualiser';`
 
 Create an AnalyserNode and connect it to <audio-visualier> by calling the setter `analyser` on the instance of the custom element. `document.querySelector('audio-visualiser').analyser = yourAnalyserNode;`. For a little live demo of this you can check out https://enjikaka.github.io/audio-visualiser/. Open dev tools or view-source to see how the <audio> tag is set up to the analyser via createMediaElementSource.
+
+```html
+<audio id="audio" src="worth-fighting-for.mp3" controls></audio>
+<audio-visualiser id="visuals" color="rebeccapurple"></audio-visualiser>
+```
+
+```js
+import 'https://cdn.skypack.dev/audio-visualiser';
+
+const audio = document.getElementById('audio');
+const visuals = document.getElementById('visuals');
+
+audio.currentTime = 41;
+
+const audioContext = new AudioContext();
+
+const source = audioContext.createMediaElementSource(audio);
+const analyser = audioContext.createAnalyser();
+
+analyser.fftSize = 1024;
+
+source.connect(analyser);
+analyser.connect(audioContext.destination);
+
+visuals.analyser = analyser;
+
+audio.addEventListener('play', () => {
+  audioContext.resume();
+  console.log('playing');
+  visuals.start();
+});
+
+audio.addEventListener('pause', () => {
+  console.log('paused');
+  visuals.stop();
+});
+```