@@ -54,6 +54,7 @@ | |||
"browser-image-compression": "^2.0.2", | |||
"clipboard": "^2.0.11", | |||
"dayjs": "^1.11.9", | |||
"js-audio-recorder": "^1.0.7", | |||
"pinia": "2.0.33", | |||
"pinia-plugin-persistedstate": "^3.2.0", | |||
"uview-plus": "^3.1.34", | |||
@@ -48,6 +48,18 @@ | |||
"style": { | |||
"navigationBarTitleText": "购买金币" | |||
} | |||
}, | |||
{ | |||
"path": "pages/recorded/index", | |||
"style": { | |||
"navigationBarTitleText": "录音" | |||
} | |||
}, | |||
{ | |||
"path": "pages/generateVideo/index", | |||
"style": { | |||
"navigationBarTitleText": "创建视频" | |||
} | |||
} | |||
], | |||
@@ -61,7 +73,7 @@ | |||
}, | |||
"globalStyle": { | |||
"navigationBarTextStyle": "black", | |||
"navigationBarTitleText": "uni-app", | |||
"navigationBarTitleText": "智像", | |||
"navigationBarBackgroundColor": "#FFF", | |||
"backgroundColor": "#FFF" | |||
} |
@@ -0,0 +1,179 @@ | |||
<template> | |||
<view class="page"> | |||
<!-- 视频 --> | |||
<view class="videoBox"> | |||
<video | |||
src="https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4" | |||
:controls="true" | |||
/> | |||
</view> | |||
<!-- 底部 --> | |||
<view class="bottomBox"> | |||
<text class="balance">金币余额: 30</text> | |||
<view class="buttonBox"> | |||
<up-button | |||
type="primary" | |||
text="下载照片" | |||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||
@click="downloadImg" | |||
></up-button> | |||
</view> | |||
<view class="shareBox"> | |||
<view class="buttonBox"> | |||
<up-button | |||
type="primary" | |||
text="分享" | |||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||
open-type="share" | |||
@click="share" | |||
></up-button> | |||
</view> | |||
<view class="buttonBox"> | |||
<up-button | |||
type="primary" | |||
text="邀请好友" | |||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||
open-type="share" | |||
@click="inviteFriend" | |||
></up-button> | |||
</view> | |||
<view class="buttonBox"> | |||
<up-button | |||
type="primary" | |||
text="购买金币" | |||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||
@click="bueCoin" | |||
></up-button> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script setup> | |||
// import myloading from '../../components/myLoading.vue' | |||
//#region 导入 | |||
import { ref, reactive } from "vue"; | |||
import { userInfoModules } from "@/store/modules/userInfo"; | |||
//#endregion | |||
const userInfoModulesPinia = userInfoModules(); | |||
//#region 下载 | |||
function downloadImg() { | |||
if (userInfoModulesPinia.platForm != 1) { | |||
uni.saveImageToPhotosAlbum({ | |||
filePath: "https://uiadmin.net/uview-plus/common/logo.png", | |||
success: function () { | |||
console.log("save success"); | |||
}, | |||
}); | |||
} else { | |||
const link = document.createElement("a"); | |||
link.href = "https://uiadmin.net/uview-plus/common/logo.png"; | |||
link.download = "image.jpg"; | |||
// document.body.appendChild(link); | |||
link.click(); | |||
// document.body.removeChild(link); | |||
} | |||
} | |||
//#endregion --------------------- | |||
//#region 分享 | |||
function share() { | |||
uni.share({ | |||
provider: "weixin", //分享服务提供商(即weixin|qq|sinaweibo) | |||
scene: "WXSenceTimeline", //WXSceneSession(分享到聊天界面)、WXSenceTimeline(分享到朋友圈)、WXSceneFavorite(分享到微信收藏) | |||
type: 5, | |||
title: "分享到朋友圈", | |||
summary: "分享描述", | |||
href: "www.baidu.com", //分享跳转地址 | |||
imageUrl: "../static/lovehot.png", //分享图片路径(必须是线上可访问图片) | |||
miniProgram: { | |||
id: "wx75cf14e3a0d45821", | |||
path: "pages/index/index", | |||
type: 0, | |||
webUrl: "", | |||
}, | |||
success: function (res) { | |||
// console.log("success:" + JSON.stringify(res)); | |||
}, | |||
fail: function (err) { | |||
// console.log("fail:" + JSON.stringify(err)); | |||
}, | |||
}); | |||
} | |||
function inviteFriend() { | |||
uni.share({ | |||
provider: "weixin", //分享服务提供商(即weixin|qq|sinaweibo) | |||
scene: "WXSceneSession", //WXSceneSession(分享到聊天界面)、WXSenceTimeline(分享到朋友圈)、WXSceneFavorite(分享到微信收藏) | |||
type: 5, | |||
title: "分享给好友", | |||
summary: "分享描述", | |||
href: "www.baidu.com", //分享跳转地址 | |||
imageUrl: "../static/lovehot.png", //分享图片路径(必须是线上可访问图片) | |||
miniProgram: { | |||
id: "gwx75cf14e3a0d45821", | |||
path: "pages/index/index", | |||
type: 0, | |||
webUrl: "", | |||
}, | |||
success: function (res) { | |||
// console.log("success:" + JSON.stringify(res)); | |||
}, | |||
fail: function (err) { | |||
// console.log("fail:" + JSON.stringify(err)); | |||
}, | |||
}); | |||
} | |||
//#endregion --------------------- | |||
//#region 页面跳转 | |||
function bueCoin() { | |||
uni.navigateTo({ | |||
url: "/pages/home/buyCoin", | |||
}); | |||
} | |||
//#endregion --------------------- | |||
//#region | |||
//#endregion --------------------- | |||
</script> | |||
<style lang="scss"> | |||
.videoBox { | |||
width: 690rpx; | |||
height: 690rpx; | |||
aspect-ratio: 9/12; | |||
video { | |||
width: 690rpx; | |||
height: 690rpx; | |||
aspect-ratio: 9/12; | |||
} | |||
} | |||
.bottomBox { | |||
width: 100%; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
.balance { | |||
margin-top: 30rpx; | |||
font-size: 40rpx; | |||
margin-bottom: 50rpx; | |||
} | |||
.buttonBox { | |||
width: 60%; | |||
} | |||
.shareBox { | |||
margin-top: 90rpx; | |||
width: 100%; | |||
display: flex; | |||
justify-content: space-between; | |||
.buttonBox { | |||
width: 30%; | |||
} | |||
} | |||
} | |||
</style> |
@@ -8,6 +8,12 @@ | |||
loop | |||
:controls="false" | |||
/> | |||
<!-- <video | |||
src="https://wenlian.wenzhou.gov.cn//upload/video/2021-01-14%E3%80%8A%E7%93%AF%E8%B6%8A%E4%B9%8B%E5%8D%8E%E3%80%8B%E6%B8%A0%E5%B7%9D%EF%BC%9A%E8%B5%B0%E7%AC%94%E5%86%99%E4%BA%BA%E7%94%9F.mp4" | |||
autoplay | |||
loop | |||
:controls="false" | |||
/> --> | |||
</view> | |||
<view class="buttonBox"> | |||
<up-button | |||
@@ -20,7 +20,7 @@ | |||
@click="downloadImg" | |||
></up-button> | |||
</view> | |||
<view class="btnBox"> | |||
<view class="shareBox"> | |||
<view class="buttonBox"> | |||
<up-button | |||
type="primary" | |||
@@ -188,7 +188,7 @@ function bueCoin() { | |||
width: 60%; | |||
} | |||
.btnBox { | |||
.shareBox { | |||
margin-top: 90rpx; | |||
width: 100%; | |||
display: flex; | |||
@@ -0,0 +1,272 @@ | |||
<template> | |||
<view class="page" @touchmove.stop.prevent=""> | |||
<image src="../../assets/img/img1.jpg" mode="aspectFit" /> | |||
<view v-show="!audioUrl" class="myBtnbox"> | |||
<up-button | |||
type="primary" | |||
text="开始录音" | |||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||
@click="openPopup" | |||
></up-button> | |||
</view> | |||
<view v-show="audioUrl" class="myBtnbox"> | |||
<up-button | |||
type="primary" | |||
text="试听" | |||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||
@click="playVoice" | |||
></up-button> | |||
</view> | |||
<view v-show="audioUrl" class="myBtnbox"> | |||
<up-button | |||
type="primary" | |||
text="重新录音" | |||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||
@click="openPopup" | |||
></up-button> | |||
</view> | |||
<view class="myBtnbox"> | |||
<up-button | |||
type="primary" | |||
text="生成视频" | |||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||
@click="" | |||
></up-button> | |||
</view> | |||
<!-- 分享 --> | |||
<view class="shareBox"> | |||
<view class="buttonBox"> | |||
<up-button | |||
type="primary" | |||
text="分享" | |||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||
open-type="share" | |||
@click="" | |||
></up-button> | |||
</view> | |||
<view class="buttonBox"> | |||
<up-button | |||
type="primary" | |||
text="邀请好友" | |||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||
open-type="share" | |||
@click="" | |||
></up-button> | |||
</view> | |||
<view class="buttonBox"> | |||
<up-button | |||
type="primary" | |||
text="购买金币" | |||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||
@click="" | |||
></up-button> | |||
</view> | |||
</view> | |||
<!-- 弹出层 --> | |||
<view class="popup" v-show="showPopup" @click.stop="showPopup = false"> | |||
<!-- 声纹图片 --> | |||
<u-transition :show="showPopup"> | |||
<view class="transition wavyIcon"> | |||
<image src="../../assets/icon/u152.png" /> | |||
</view> | |||
</u-transition> | |||
<!-- 底部框 --> | |||
<u-transition :show="showPopup"> | |||
<view | |||
class="transition microphoneIcon" | |||
@touchstart.stop="startRecord" | |||
@touchend.stop="endRecord" | |||
> | |||
<image src="../../assets/icon/u149.png" mode="aspectFit" /> | |||
</view> | |||
</u-transition> | |||
</view> | |||
</view> | |||
</template> | |||
<script setup> | |||
// import myloading from '../../components/myLoading.vue' | |||
//#region 导入 | |||
import { ref, reactive } from "vue"; | |||
import { userInfoModules } from "@/store/modules/userInfo"; | |||
const userInfoModulesPinia = userInfoModules(); | |||
//#endregion | |||
//#region 页面跳转 | |||
function bueCoin() { | |||
uni.navigateTo({ | |||
url: "/pages/home/buyCoin", | |||
}); | |||
} | |||
//#endregion --------------------- | |||
//#region 弹出层 | |||
const showPopup = ref(false); | |||
function openPopup() { | |||
showPopup.value = true; | |||
} | |||
function close() { | |||
console.log("close"); | |||
} | |||
function open() { | |||
console.log("open"); | |||
} | |||
//#endregion --------------------- | |||
//#region 录音功能 | |||
let Recorder = null; //h5定义录音对象 | |||
let recorder = null; //h5定义录音实例 | |||
let recorderManager = null; //小程序定义录音实例 | |||
let innerAudioContext = null; //小程序定义mp3实例 | |||
const audioUrl = ref(null); | |||
const audioRef = ref(null); | |||
if (userInfoModulesPinia.platForm == 1) { | |||
// 在 H5 平台导入 Recorder | |||
import("js-audio-recorder").then((module) => { | |||
const Recorder = module.default; | |||
// 也可以继续使用 recorder 变量 | |||
const parameter = { | |||
sampleBits: 16, // 采样位数,支持 8 或 16,默认是16 | |||
sampleRate: 16000, // 采样率,支持 11025、16000、22050、24000、44100、48000,根据浏览器默认值,我的chrome是48000 | |||
numChannels: 1, // 声道,支持 1 或 2, 默认是1 | |||
}; | |||
recorder = new Recorder(parameter); | |||
}); | |||
} else { | |||
recorderManager = uni.getRecorderManager(); | |||
innerAudioContext = uni.createInnerAudioContext(); | |||
innerAudioContext.autoplay = false; | |||
} | |||
//#endregion | |||
//#region 录音 | |||
function startRecord() { | |||
if (userInfoModulesPinia.platForm != 1) { | |||
console.log("开始录音xcx"); | |||
recorderManager.start({ | |||
// format: "mp3", // 录音的格式 | |||
duration: 60000, // 最大录音时长,单位毫秒 | |||
}); | |||
} else { | |||
console.log("开始录音h5"); | |||
recorder.start(); | |||
} | |||
} | |||
async function endRecord() { | |||
if (userInfoModulesPinia.platForm != 1) { | |||
recorderManager.onStop((res) => { | |||
console.log("录音结束xcx", res); | |||
audioUrl.value = res.tempFilePath; | |||
innerAudioContext.src = audioUrl.value; | |||
}); | |||
recorderManager.stop(); | |||
} else { | |||
console.log("录音结束h5"); | |||
await recorder.stop(); | |||
audioUrl.value = URL.createObjectURL(recorder.getWAVBlob()); | |||
} | |||
} | |||
async function playVoice() { | |||
if (userInfoModulesPinia.platForm != 1) { | |||
await innerAudioContext.play(); | |||
console.log("试听了xcx"); | |||
showPopup.value = false; | |||
} else { | |||
const link = document.createElement("audio"); | |||
link.src = audioUrl.value; | |||
link.play(); | |||
console.log("试听了h5"); | |||
showPopup.value = false; | |||
} | |||
} | |||
//#endregion --------------------- | |||
//#region | |||
//#endregion --------------------- | |||
</script> | |||
<style lang="scss"> | |||
.page { | |||
position: relative; | |||
} | |||
image { | |||
height: 650rpx; | |||
} | |||
.myBtnbox { | |||
margin-top: 30rpx; | |||
} | |||
.shareBox { | |||
margin-top: 250rpx; | |||
width: 100%; | |||
display: flex; | |||
justify-content: space-between; | |||
.buttonBox { | |||
width: 30%; | |||
} | |||
} | |||
.popup { | |||
position: absolute; | |||
width: 100vw; | |||
height: 100vh; | |||
background-color: rgba(0, 0, 0, 0.5); | |||
z-index: 2; | |||
.wavyIcon { | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
height: 160rpx; | |||
width: 50%; | |||
background-color: #fff; | |||
z-index: 3; | |||
overflow: hidden; | |||
image { | |||
position: absolute; | |||
left: -500rpx; | |||
display: inline-block; | |||
width: 1000rpx; | |||
height: 160rpx; | |||
z-index: 3; | |||
// animation: moveImage 3s linear infinite; | |||
} | |||
@keyframes moveImage { | |||
0% { | |||
left: -100rpx; | |||
} | |||
50% { | |||
left: -500rpx; | |||
} | |||
100% { | |||
left: -100rpx; | |||
} | |||
} | |||
} | |||
.microphoneIcon { | |||
position: absolute; | |||
bottom: 0; | |||
height: 500rpx; | |||
width: 100%; | |||
background-color: #fff; | |||
z-index: 3; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
image { | |||
max-width: 15%; | |||
max-height: 15%; | |||
transform: rotate(45deg); | |||
touch-action: none; | |||
} | |||
} | |||
} | |||
</style> |
@@ -5,6 +5,7 @@ | |||
justify-content: center; | |||
padding: 20rpx; | |||
background-color: #fff; | |||
font-size: 28rpx; | |||
// min-height: 100vh; | |||
} | |||
@@ -27,6 +28,11 @@ view { | |||
} | |||
} | |||
// 按钮包裹盒子,控制按钮宽度 | |||
.myBtnbox { | |||
width: 50%; | |||
} | |||
// 主要文字颜色和图片颜色 | |||
// .imgggg { | |||
// color: #4452d7; | |||
@@ -3150,6 +3150,11 @@ jpeg-js@^0.3.4: | |||
resolved "https://registry.npmmirror.com/jpeg-js/-/jpeg-js-0.3.7.tgz#471a89d06011640592d314158608690172b1028d" | |||
integrity sha512-9IXdWudL61npZjvLuVe/ktHiA41iE8qFyLB+4VDTblEsWBzeg8WQTlktdUK4CdncUqtUgUg0bbOmTE2bKBKaBQ== | |||
js-audio-recorder@^1.0.7: | |||
version "1.0.7" | |||
resolved "https://registry.npmmirror.com/js-audio-recorder/-/js-audio-recorder-1.0.7.tgz#01501cb9eb143d57994b42bd5ae97974fda18908" | |||
integrity sha512-JiDODCElVHGrFyjGYwYyNi7zCbKk9va9C77w+zCPMmi4C6ix7zsX2h3ddHugmo4dOTOTCym9++b/wVW9nC0IaA== | |||
js-tokens@^4.0.0: | |||
version "4.0.0" | |||
resolved "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" | |||