请问vue3 setup语法糖使用uni-app的uni.createInnerAudioContext();怎么使用
后端接口是用网易云音乐nodejs
<template>
<view class="content">
<div class="contents">
<img :src="info.image.coverImgUrl" alt="" class="image">
<div class="text">
<text >
{{ info.image.name }}
</text>
<view class="info">
<img :src="info.image.creator?.avatarUrl" alt="" class="avatarUrl">
<text>
{{info.image.creator?.nickname }}
</text>
</view>
<div class="infrom">
<div class="iconfont icon-fenxiang">{{info.image.shareCount }}</div>
<div class="iconfont icon-pinglun">{{info.image.commentCount }}</div>
<div class="iconfont icon-dingyue1">{{info.image.subscribedCount }}</div>
</div>
</div>
</div>
<div class="list" v-for="(item,index) in info.image.tracks" :key="item.id" @click="ID(item.al.id)">
<span class="index">{{ index+1 }}</span>
<div class="name">
<div>{{ item.al.name }}</div>
<div>{{ item.ar[0].name }}</div>
</div>
<p :class="[store.isplay? ' iconfont icon-bofang1':'iconfont icon-bofang_']" @click="play"></p>
<span class="iconfont icon-gengduoxiao"></span>
</div>
</view>
</template>
<script setup lang="ts">
import {onLoad} from "@dcloudio/uni-app"
import { getsongdetail, getsongurl } from "../api/serve";
import { useCounterStore } from "@/pages/store/index";
interface Person{
id: number;
image: any;
state: any;
index: number;
url:number
}
let audio:any=''
let url:any=1
let id: number = 1
let songurl: any = ''
const store = useCounterStore();
onLoad((option) => {
id = option?.id
audio = uni.createInnerAudioContext()
})
const info : Person = reactive({
image: [],
})
onMounted(async() => {
let res = await getsongdetail(id)
info.image=res.data.playlist
uni.setNavigationBarTitle({
title: info.image.name
});
})
function play() {
store.isplay = !store.isplay
}
async function ID(id:number) {
console.log(id);
songurl = await getsongurl(id)
console.log(songurl.data.data[0]);
url=songurl.data?.data[0]?.url
}
// onLoad(() => {
// const innerAudioContext = uni.createInnerAudioContext();
// innerAudioContext.autoplay = true;
// innerAudioContext.src = url
// innerAudioContext.onPlay(() => {
// console.log('开始播放');
// });
// })
// audio.autoplay=true
</script>
<style lang="less" scoped>
.content{
display: flex;
flex-direction: column;
.contents{
padding-top: 10px;
display: flex;
justify-content: space-around;
background-image:linear-gradient(rgb(14 11 11 / 0%),red);
.image{
width: 100px;
height: 100px;
border-radius: 2.667vw;
}
.text{
margin: 10px;
width: 80%;
height: 100%;
color: aliceblue;
.infrom{
width: 100%;
height: 50%;
display: flex;
justify-content: space-around;
.iconfont{
width: 60px;
height: 50px;
border-radius: 5px;
color: aliceblue;
opacity: .9;
}
}
.info{
display: flex;
align-items: center;
height: 35px;
line-height:35px ;
.avatarUrl{
margin-right: 15px;
width: 25px;
height: 25px;
border-radius: 50%;
}
}
}
}
.list{
margin: 10px 0;
display: flex;
align-items: center;
justify-content: space-between;
.icon-bofang1{
width: 10px;
text-align: end;
}
.name{
width: 80%;
text-align: left;
}
.index{
margin: 0 2.667vw;
}
}
}
</style>
针对您的问题，我可以提供以下解决方案：
首先，在vue3 setup语法糖中使用uni.createInnerAudioContext()播放音频文件，需要先安装uni-app的uni-audio插件，使用命令：
npm install --save uni-audio
然后，在需要播放音频文件的组件或页面中，使用import引入插件：
import { createInnerAudio } from 'uni-audio';
接着，调用createInnerAudio()方法创建一个音频对象，具体代码示例：
// 获取后端接口返回的音频地址，例如：
const audioUrl = 'http://music.163.com/song/media/outer/url?id=12345678.mp3';
// 创建音频对象
const audio = createInnerAudio({
src: audioUrl, // 传入音频地址
autoplay: false, // 是否自动播放，默认false
loop: false, // 是否循环播放，默认false
volume: 1.0, // 音量大小，范围0~1，默认1.0
duration: 0, // 音频长度,单位秒
currentTime: 0, // 当前播放位置,单位秒
paused: false, // 是否暂停或停止
buffered: 0, // 当前缓存时间
networkState: 0, // 网络状态，0：NETWORK_EMPTY - audio/video尚未初始化，1：NETWORK_IDLE - 音频/视频是活动的且已选取资源，但并未使用网络，2：NETWORK_LOADING - 浏览器正在下载数据，3：NETWORK_NO_SOURCE - 未找到音频/视频来源
readyState:0, // 播放元素就绪状态，0：HAVE_NOTHING - 没有关于音频/视频是否就绪的信息，1： HAVE_METADATA - 关于音频/视频就绪的元数据已加载完成，2：HAVE_CURRENT_DATA - 当前播放位置可用，3： HAVE_FUTURE_DATA - 当前及至少下一帧的数据可用，4：HAVE_ENOUGH_DATA - 可用数据足以开始播放了
error: null, // 错误信息
startTime: 0, // 开始播放的时间，单位秒
direction: 0, // 播放方向，1: 正常播放，-1：倒带播放，默认1
playSpeed: 1.0, // 播放速度，范围0.5~2.0，默认1.0
debug: false, // 调试模式，控制台输出信息
});
// 播放音频
audio.play();
注意：由于uni.createInnerAudioContext()是uni-app插件封装的uni.audio功能，所以在vue3 setup语法糖中需要使用uni-audio插件才能使用uni.createInnerAudioContext()方法。
至于如何获取网易云音乐nodejs接口返回的音频文件地址，需要具体根据接口文档来实现，可以使用uni-app自带的uni.request()方法发起请求，并且在请求成功回调函数中获取音频文件地址。具体代码示例：
// 发起请求获取音频文件地址
uni.request({
url: 'http://api.music.163.com/song/media/outer/url?id=12345678.mp3',
method: 'GET',
success: function (res) {
// 获取音频地址
const audioUrl = res.data;
// 创建音频对象
const audio = createInnerAudio({
src: audioUrl,
autoplay: true,
loop: false,
volume: 1.0,
playSpeed: 1.0,
debug: true,
});
// 播放音频
audio.play();
},
fail: function (err) {
console.log(err);
}
});
以上就是针对问题的具体解决方案，希望能够对您有所帮助。如果还有其他问题，欢迎随时提出。