131 lines
3.6 KiB
Vue
131 lines
3.6 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="ciy-audio组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">音乐播放器</view>
|
||
<view class="content">
|
||
<view class="tip">
|
||
支持背景/前景播放、倍速播放。<br />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="px2 py2">
|
||
<ciy-audio :background="props.background" :src="props.src" :coverimg="props.coverimg" :title="props.title" :nonedisplay="props.nonedisplay" :epname="props.epname" :singer="props.singer" @change="chglog('change', $event)">
|
||
</ciy-audio>
|
||
</view>
|
||
<view style="margin:2em;display: flex;justify-content: space-around;">
|
||
<view @tap="this.settheme('dark')">dark</view>
|
||
<view @tap="this.settheme('light')">light</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">属性</view>
|
||
<view class="content">
|
||
<view class="prp">src</view>
|
||
<view class="tip">音频文件url，支持hls。</view>
|
||
<ciy-input bb v-model="props.src"></ciy-input>
|
||
<view class="hr"></view>
|
||
<view class="prp">title</view>
|
||
<view class="tip">
|
||
标题。<br />
|
||
默认 无题
|
||
</view>
|
||
<ciy-input bb v-model="props.title"></ciy-input>
|
||
<view class="hr"></view>
|
||
<view class="prp">nonedisplay</view>
|
||
<view class="tip">
|
||
是否不显示界面。<br />
|
||
默认 false
|
||
</view>
|
||
<view style="margin:0 1em;">
|
||
<ciy-switch v-model="props.nonedisplay"></ciy-switch>
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">background</view>
|
||
<view class="tip">
|
||
是否背景播放。<br />
|
||
若需要小程序在退到后台后继续播放音频，需在 app.json 中配置 requiredBackgroundModes 属性，向官方申请权限。<br />
|
||
默认 false
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">coverimg</view>
|
||
<view class="tip">
|
||
封面图url。仅背景播放时后台显示。<br />
|
||
</view>
|
||
<ciy-input bb v-model="props.coverimg"></ciy-input>
|
||
<view class="hr"></view>
|
||
<view class="prp">epname</view>
|
||
<view class="tip">
|
||
专辑名。仅背景播放时后台显示。<br />
|
||
</view>
|
||
<ciy-input bb v-model="props.epname"></ciy-input>
|
||
<view class="hr"></view>
|
||
<view class="prp">singer</view>
|
||
<view class="tip">
|
||
歌手名。仅背景播放时后台显示。<br />
|
||
</view>
|
||
<ciy-input bb v-model="props.singer"></ciy-input>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">方法</view>
|
||
<view class="content">
|
||
无
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">事件</view>
|
||
<view class="content">
|
||
<view class="evt">@change</view>
|
||
<view class="tip">
|
||
打开关闭变更事件<br />
|
||
from: play,pause,stop
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="log" v-for="(item, index) in eventlog" :key="index">
|
||
<text class="code">{{eventlog.length - index}}</text>
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="hr"></view>
|
||
</view>
|
||
<ciy-tabbar ref="tabbar"></ciy-tabbar>
|
||
</template>
|
||
|
||
<style scoped>
|
||
@import '@/pages/demo/zdemo.css';
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
mixins: [zmixin],
|
||
data() {
|
||
return {
|
||
ns: 5,
|
||
popsh: false,
|
||
props: {
|
||
src: this.file_stor('/img/music1.mp3'),
|
||
coverimg: this.file_stor('/img/face.png'),
|
||
title: '无题',
|
||
direction: 'bottom',
|
||
edge: 100,
|
||
anispeed: 300,
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
if (this.opn.bg == '1')
|
||
this.props.background = true;
|
||
},
|
||
methods: {
|
||
async openpop(ns) {
|
||
this.ns = ns;
|
||
this.popsh = true;
|
||
},
|
||
funopen() {
|
||
this.getrefs('anipop').then(ref => ref.Open());
|
||
}
|
||
}
|
||
}
|
||
</script> |