totole/vue-audio-recorder
1
0
Fork 0
mirror of https://github.com/kevin-DL/vue-audio-recorder.git synced 2026-01-11 10:54:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve demo

Browse Source
This commit is contained in:
Gennady Grishkovtsov
2018-08-09 22:22:56 +03:00
parent a573538bac
commit f210a001da
4 changed files with 54 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
demo/app.vue Normal file
View File

@@ -0,0 +1,51 @@
<style lang="scss">
.toggle {
cursor: pointer;
margin: 20px;
}
</style>
<template>
<div class="row">
<div class="toggle" @click="toggle">TOGGLE</div>
<audio-recorder v-if="showRecorder"
upload-url="some url"
:attempts="3"
:time="2"
:start-record="callback"
:stop-record="callback"
:start-upload="callback"
:successful-upload="callback"
:failed-upload="callback"/>
<audio-player :src="mp3" v-if="!showRecorder"/>
</div>
</template>
<script>
import AudioPlayer from '../src/components/player'
import AudioRecorder from '../src/components/recorder'
export default {
name: 'app',
components: {
AudioPlayer,
AudioRecorder
},
data () {
return {
mp3: '/demo/example.mp3',
showRecorder: true
}
},
methods: {
callback (msg) {
console.debug('Event: ', msg)
},
toggle () {
this.showRecorder = !this.showRecorder
}
}
}
</script>

BIN
demo/example.mp3 Normal file
View File

Binary file not shown.

12
demo/index.html
View File

@@ -6,16 +6,6 @@
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="app">
<audio-recorder
upload-url="some url"
:attempts="3"
:time="2"
:start-record="callback"
:stop-record="callback"
:start-upload="callback"
:successful-upload="callback"
:failed-upload="callback"/>
</div>
<div id="app"></div>
</body>
</html>

10
demo/index.js
View File

@@ -1,16 +1,10 @@
import Vue from 'vue'
import axios from 'axios'
import AudioRecorder from '../src/audio-recorder'
import app from './app'
Vue.config.productionTip = false
Vue.prototype.$http = axios
new Vue({
el: '#app',
components: {AudioRecorder},
methods: {
callback (msg) {
console.debug('Event: ', msg)
}
}
render: h => h(app)
})