Posts

A simple web audio player, bind to <span/>, one click, audio play, click again, audio stop

example All you have to is to write below html code: a span with class name of word-audio and attribute of data-src pointed to a audio stream resource   <span class='word-audio audio' style='display:inline-block'  data-src='https://cdn.mp3xa.pw/proxy/cs1-43v4.vkuseraudio.net/ p17/fe6d95af2cee33.mp3'></span>    Bertie Higgins — Casablanca word.js function startAnimation(e) { if (e.className == 'word-audio audio') e.className = 'word-audio audio-light'; else if (e.className == 'word-audio audio-light') e.className = 'word-audio audio-playing'; else e.className = 'word-audio audio' console.log(e.className); } function play(e, context, audioBuffer) { if (e.state == 1) { e.source.stop(); e.source.onended(); e.source = null; } else { e.state = 1; const source = context.createBufferSource(); e.source = source; ...

How to extract media files from a anki flashcard package(*.apkg)

Image
*.apkg The .apkg file is a zip file (as you know). Inside, you'll find the collection (an sqlite3 database of notes/cards), the media file which you were trying to open, and a bunch of numbered files 0-whatever number(these are media files). Just use 7zip tool open the apkg file and extract into a folder. open the "media" file via a text editor tool to find the media file extension. example of "media" {"16486": "COCA_16486.mp3", } rename "16486" file to a mp3 file, then you got the media file. how media used in flash card Export your flash cards into a plain text. [sound:COCA_16486.mp3] spatially <div style=''>英['speɪʃəlɪ] 美['speɪʃəlɪ]</div> <div style=''>adv.空间地,存在于空间地;</div> "<div><br /></div><div style='color:RosyBrown'>ADJ</div><div style='color:OrangeRed'>空间的;与空间有关的</div><div style=""font-weigh...

fix up chromium m47 build error: unsupported reloc 42 against global symbol gmon_start

Error: ld.gold: error: /usr/lib/gcc/x86_64-linux-gnu/5.3.1/../../../x86_64-linux-gnu/crti.o: unsupported reloc 42 against global symbol gmon_start Solution: export GYP_DEFINES="linux_use_bundled_gold=0"

bizcharts example: Line Chart

Image
Chart UI Codes ChartComponent.js import React, { Component } from 'react'; import {Chart, Axis, Tooltip, Geom, Coord, Label} from 'bizcharts'; import DataSet from '@antv/data-set'; const { DataView } = DataSet; export class LineChart extends Component { render() { const { data, width, height } = this.props; if (!data || data.length <= 0) return null; const ytitle = { autoRotate: true, offset: -10, textStyle: { fontSize: '22', textAlign: 'left', fill: 'rgb(75,83,87)', rotate: 0 }, position: 'end', }; const xtitle = { autoRotate: true, offset: -20, textStyle: { fontSize: '22', textAlign: 'center', fill: 'rgb(75,83,87)', rotate: 0 }, position: 'end', }; const line = { stroke: 'rgb(197,197,200)', lineWidth: 2 ...

bizcharts example : Doughnut Chart

Image
Chart UI key codes explaintion: <Coord type='theta' innerRadius={0.45} /> without 'innerRadius={0.45}', UI will looks like: without below codes, UI will looks like: <Geom select={[false,{}]} type='intervalStack' position='percent'  color={['type', ['rgba(255, 255, 255, 0)']]}  style={{stroke: 'rgba(152,191,182,1)', lineWidth: 1}}>  </Geom> Codes ChartComponent.js import React, { Component } from 'react'; import {Chart, Axis, Tooltip, Geom, Coord, Label} from 'bizcharts'; import DataSet from '@antv/data-set'; const { DataView } = DataSet; export class ScoreChart extends Component { render() { const { width, height, score } = this.props; const scoreData = [ { type: 'Score', value: score }, { type: '', value: 10 - score }, ]; const scoreDv = new DataView(); scoreDv.source(scoreData) .transform({ type: 'pe...

sed replace shell variable which include slash ('/')

Test content cat test-sed.txt aaa/bbb/ccc/ddd/eee fff/ggg/ss replace "ccc/ddd" to "CCC/DDD" via sed NEW_STRING="CCC/DDD" sed -i "s:ccc/ddd:${NEW_STRING}:" test-sed.txt Notes: use ':' as seperate char rather than '/', which is default use "" include the replace command

Await is a reserved word error

Solution: In order to use await, the function directly enclosing it needs to be async. example codes: async tryGetUserName() { let session = await Auth.currentSession(); ...... } async should be there, otherwise you will get the error.