Customized audio display in vue project, basic use of wavesurfer.js

Rendering: wavesurfer is a customizable audio waveform visualization built on top of the Audio API and HTML5 Canvas. Basic usage: <body> <script src=”//i2.wp.com/unpkg.com/wavesurfer.js”></script> <div id=”waveform”></div> <script> var wavesurfer = WaveSurfer.create({ container: ‘#waveform’, waveColor: ‘violet’, progressColor: ‘purple’ }); //Receive incoming audio wavesurfer.load(‘./test.mp3’); // event wavesurfer.on(‘ready’, function () { wavesurfer.play(); }); </script> </body> Commonly used parameters of […]

Howler.js HTML5 sound engine

Introduction Howler.js is a nice HTML5 sound engine. It has powerful functions, good performance, and is very convenient to use. 1. Official website https://howlerjs.com/ GitHub https://github.com/goldfire/howler.js 2. Compatibility Howler uses Web Audio by default, but can automatically convert to HTML 5 Audio on IE. This is very considerate. 3. Sound activation Safari and Chrome on […]

Using editor.js in vue3

The first step is to install dependencies npm i @editorjs/editorjs –save The second step is to create the editor.vue plug-in <template> <div> <div id=”editorjs” :style=”‘width:’ + props.width + ‘px;height:’ + props.height + ‘px;'”></div > </div> </template> <script setup> //Header: used to set the title level of the text, supporting multi-level titles. //Paragraph: used to add […]

[Plug-in] Page guidance library driver.js:

Article directory 1. Rendering: 2. Implementation ideas: 3. Implementation code: 【1】Technical characteristics of Driver.js 【2】Install dependencies 【3】Code implementation 【4】Configure related parameters 1. Rendering: 2. Implementation ideas: 【Official website】https://driverjs.com/docs/installation 【npm】https://www.npmjs.com/package/driver.js [Case] Transform driver.js to create a general-purpose novice guidance plug-in for business [Case] Vue3 uses driver.js as a guide page, and the delineated content is blank. […]

ARCGIS GeoJsonLayer.js

It works, but it doesn’t have many functions. At most, it can mark points and lines and change the color. It won’t work if the whole thing is marked. Anyway, I didn’t get it done. define([ “dojo/_base/declare”, “esri/graphic”, “esri/layers/GraphicsLayer”, “esri/InfoTemplate”, “esri/graphicsUtils”, “esri/Color”, “esri/symbols/SimpleMarkerSymbol”, “esri/symbols/SimpleLineSymbol”, “esri/symbols/SimpleFillSymbol”, “esri/renderers/SimpleRenderer”, “esri/SpatialReference”, “esri/geometry/webMercatorUtils”, “esri/request”, “esri/config”, “dojo/_base/url”, “dojo/_base/lang”, “esri/symbols/PictureMarkerSymbol” ], function […]