vue3 setup语法糖使用uni-app的uni.createInnerAudioContext()

Question

请问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>

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 以下回答来自chatgpt:

  针对您的问题，我可以提供以下解决方案：

  首先，在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);
      }
  });
  

  以上就是针对问题的具体解决方案，希望能够对您有所帮助。如果还有其他问题，欢迎随时提出。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^