uniapp音乐播放整理

一、前置知识点

1.1 音频组件控制-uni.createInnerAudioContext()

创建并返回内部 audio 上下文 innerAudioContext 对象。

主要用于当前音乐播放；

1.1.1 innerAudioContext属性
属性类型说明只读平台差异说明
srcString音频的数据链接，用于直接播放。否微信小程序不支持本地路径
startTimeNumber开始播放的位置（单位：s），默认 0否
autoplayBoolean是否自动开始播放，默认 false否H5端部分浏览器不支持
loopBoolean是否循环播放，默认 false否
obeyMuteSwitchBoolean是否遵循系统静音开关，当此参数为 false 时，即使用户打开了静音开关，也能继续发出声音，默认值 true否微信小程序、百度小程序、抖音小程序、飞书小程序、京东小程序、快手小程序（仅在 iOS 上生效）
durationNumber当前音频的长度（单位：s），只有在当前有合法的 src 时返回，需要在onCanplay中获取是
currentTimeNumber当前音频的播放位置（单位：s），只有在当前有合法的 src 时返回，时间不取整，保留小数点后 6 位是
pausedBoolean当前是是否暂停或停止状态，true 表示暂停或停止，false 表示正在播放是
bufferedNumber音频缓冲的时间点，仅保证当前播放时间点到此时间点内容已缓冲。是
volumeNumber音量。范围 0~1。否
sessionCategoryString设置音频播放模式，可取值：“ambient” - 不中止其他声音播放，不能后台播放，静音后无声音； “soloAmbient” - 中止其他声音播放，不能后台播放，静音后无声音； “playback” - 中止其他声音，可以后台播放，静音后有声音。 默认值为"playback"。否App 3.3.7+
playbackRateNumber播放的倍率。可取值：0.5/0.8/1.0/1.25/1.5/2.0，默认值为1.0否App 3.4.5+（Android 需要 6 及以上版本）、微信小程序 2.11.0、支付宝小程序、抖音小程序 2.33.0+、快手小程序、百度小程序 3.120.2+
1.1.2 innerAudioContext方法列表
方法参数说明
play播放（H5端部分浏览器需在用户交互时进行）
pause暂停
stop停止
seekposition跳转到指定位置，单位 s
destroy销毁当前实例
onCanplaycallback音频进入可以播放状态，但不保证后面可以流畅播放
onPlaycallback音频播放事件
onPausecallback音频暂停事件
onStopcallback音频停止事件
onEndedcallback音频自然播放结束事件
onTimeUpdatecallback音频播放进度更新事件
onErrorcallback音频播放错误事件
onWaitingcallback音频加载中事件，当音频因为数据不足，需要停下来加载时会触发
onSeekingcallback音频进行 seek 操作事件
onSeekedcallback音频完成 seek 操作事件
offCanplaycallback取消监听 onCanplay 事件
offPlaycallback取消监听 onPlay 事件
offPausecallback取消监听 onPause 事件
offStopcallback取消监听 onStop 事件
offEndedcallback取消监听 onEnded 事件
offTimeUpdatecallback取消监听 onTimeUpdate 事件
offErrorcallback取消监听 onError 事件
offWaitingcallback取消监听 onWaiting 事件
offSeekingcallback取消监听 onSeeking 事件
offSeekedcallback取消监听 onSeeked 事件
1.1.3 简单示例
// 创建innerAudioContext对象
const innerAudioContext = uni.createInnerAudioContext();
// 开始自动播放
innerAudioContext.autoplay = true;
// 设置音频地址
innerAudioContext.src = 'url.mp3';
// 开始播放的回调函数
innerAudioContext.onPlay(() => {console.log('开始播放');
});
// 播放报错的事件监听
innerAudioContext.onError((res) => {console.log(res.errMsg);console.log(res.errCode);
});

1.2 背景音频控制-uni.getBackgroundAudioManager()

获取全局唯一的背景音频管理器 backgroundAudioManager。

主要是实现后台播放功能，退出app或者小程序后还能继续播放，同时状态栏有控制播放状态控件；

1.2.1 backgroundAudioManager属性列表
属性类型说明只读
durationNumber当前音频的长度（单位：s），只有在当前有合法的 src 时返回是
currentTimeNumber当前音频的播放位置（单位：s），只有在当前有合法的 src 时返回是
pausedBoolean当前是是否暂停或停止状态，true 表示暂停或停止，false 表示正在播放是
srcString音频的数据源，默认为空字符串，**当设置了新的 src 时，会自动开始播放，**目前支持的格式有 m4a, aac, mp3, wav否
startTimeNumber音频开始播放的位置（单位：s）否
bufferedNumber音频缓冲的时间点，仅保证当前播放时间点到此时间点内容已缓冲。是
titleString音频标题，用于做原生音频播放器音频标题。原生音频播放器中的分享功能，分享出去的卡片标题，也将使用该值。否
epnameString专辑名，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。否
singerString歌手名，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。否
coverImgUrlString封面图url，用于做原生音频播放器背景图。原生音频播放器中的分享功能，分享出去的卡片配图及背景也将使用该图。否
webUrlString页面链接，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。否
protocolString音频协议。默认值为 ‘http’，设置 ‘hls’ 可以支持播放 HLS 协议的直播音频，App平台暂不支持否
playbackRateNumber播放的倍率。可取值：0.5/0.8/1.0/1.25/1.5/2.0，默认值为1.0。(App 3.4.5+、微信基础库 2.11.0+、支付宝小程序、抖音小程序 2.33.0+、快手小程序、百度小程序 3.120.2+)否
1.2.2 backgroundAudioManager方法列表
方法参数说明
play播放
pause暂停
stop停止
seekposition跳转到指定位置，单位 s
onCanplaycallback背景音频进入可以播放状态，但不保证后面可以流畅播放
onPlaycallback背景音频播放事件
onPausecallback背景音频暂停事件
onStopcallback背景音频停止事件
onEndedcallback背景音频自然播放结束事件
onTimeUpdatecallback背景音频播放进度更新事件
onPrevcallback用户在系统音乐播放面板点击上一曲事件（iOS only）
onNextcallback用户在系统音乐播放面板点击下一曲事件（iOS only）
onErrorcallback背景音频播放错误事件
onWaitingcallback音频加载中事件，当音频因为数据不足，需要停下来加载时会触发
1.2.3 简单示例
// 创建bgAudioManager对象
const bgAudioManager = uni.getBackgroundAudioManager();
bgAudioManager.title = '音乐标题';
bgAudioManager.singer = '作者';
bgAudioManager.coverImgUrl = '封面图片';
bgAudioManager.src = 'url.mp3';
// 开始播放的回调函数
bgAudioManager.onPlay(() => {console.log('开始播放');
});
// 播放报错的事件监听
bgAudioManager.onError((res) => {console.log(res.errMsg);console.log(res.errCode);
});
1.2.4 注意点

注意 因为背景音频播放耗费手机电量，所以平台都有管控，需在manifest中填写申请。

  • ios App平台，背景播放需在manifest.json -> app-plus -> distribute -> ios 节点添加 "UIBackgroundModes":["audio"] 才能保证音乐可以后台播放（打包成ipa生效）
  • 小程序平台，需在manifest.json 对应的小程序节点下，填写"requiredBackgroundModes": [“audio”]。发布小程序时平台会审核

二、音乐功能点

2.1 实现效果

  1. 控制播放暂停；
  2. 实现上一首，下一首；
  3. 展示当前音乐当前进度时间，结束时间；展示当前音乐当前进度时间，结束时间；
  4. 可以通过进度条去控制音乐跳转到对应时间点；
  5. 实现倍速播放；
  6. 后台播放；

2.2 获取音乐信息

  1. 当前音乐播放状态；
  2. 音乐列表数据，便于实现上一首下一首；
  3. 当前音乐播放时长，与结束时长，播放速度；
  4. 音乐的地址、封面图片、名称等基础信息；
  5. 歌词展示，到达当前歌词时歌词高亮；

三、实现步骤

3.1 技术选型

通过前置知识点我们了解到了uni.createInnerAudioContext()和uni.getBackgroundAudioManager()的实例属性方法等。

可以根据需求去选择性调用实例，前者可以在小程序中调用来播放音乐；而如果想要退出小程序或者app后依然可以让音乐继续播放，这个时候就可以使用后者来生成悬浮框，以及状态栏中显示；

结论：

  1. 小程序或app中使用uni.createInnerAudioContext()；
  2. 退出小程序或app时使用uni.getBackgroundAudioManager();

3.2 实现思路

根据前面整理的音乐所需功能点，我们需要使用store存储一些全局音乐状态信息；便于切换到其他界面的时候可以同步得到最新的音乐信息。

  1. 首先在程序初始化时，实例化一个audio对象挂载到vue原型上；
  2. 用于实时获取当前播放信息；
  3. 初始化时就可以把需要的监听事件挂载，配合实际业务场景；

3.3 简易代码示例

3.3.1 实例化挂载audio对象

入口文件实例化-main.js

// 新建音乐对象挂载到原型上
const innerAudioContext = uni.createInnerAudioContext();
// 音乐播放报错监听
innerAudioContext.onError((res) => {console.log("音乐播放报错监听", res);
});
// 音乐加载中监听
innerAudioContext.onWaiting((res) => {console.log("音乐加载中监听", res);
});
Vue.prototype.$AudioContext = innerAudioContext;
3.3.2 定义一个简单的音乐列表
{
// 滚动条信息
playInfo: {progressWidth: 2, 	// 滚动条currentTime: 0,			// 当前音乐时间scurrentValue: '00:00', // 转换成时间展示duration: 0,				// 当前音乐总时间sdurationValue: '00:00',	// 总时间转换展示 },
// 简易歌曲列表
audioList: [ {title: '未完成之前',src: 'https://music.163.com/song/media/outer/url?id=1453946527.mp3',id: 1453946527,}, {title: '鲜花',src: 'https://music.163.com/song/media/outer/url?id=2086327879.mp3',id: 2086327879,},{title: '水星记',src: 'https://music.163.com/song/media/outer/url?id=441491828.mp3',id: 441491828,}, {title: '人生有时候懂得放弃',src: 'https://music.163.com/song/media/outer/url?id=2139388989.mp3',id: 2139388989,},{title: '精卫',src: 'https://music.163.com/song/media/outer/url?id=1951069525.mp3',id: 1951069525,},
],
}
3.3.3 实现暂停播放、切换音乐

在这里插入图片描述

要实现播放音乐首先要给$AudioContext设置音乐地址src，这样才能通过地址去获取对应的音乐信息。

首选需要在页面一加载时默认配置列表中第一首歌的地址：

onLoad() {this.$AudioContext.playbackRate = 2;if (this.audioList.length) {this.$AudioContext.src = this.audioList[this.currentIndex].src;this.currentTitle = this.audioList[this.currentIndex].title;this.setPlayInfo();}// 开始播放获取音乐信息this.$AudioContext.onPlay((e) => {this.setPlayInfo();});this.$AudioContext.onEnded((e) => {// 结束播放去播放下一首this.hanleAudioChange();});
},

播放按钮： 判断paused的状态选择性去调用播放和暂停方法；

切换音乐： 点击音乐列表行更新音乐地址src，停止当前音乐，最后调用播放方法即可；

// 音乐播放
handlePlay() {this.$AudioContext.paused ? this.$AudioContext.play() : this.$AudioContext.pause();this.paused = this.$AudioContext.paused;this.recursionDeep();
},
// 选择目标音乐播放
handleCurrentAudio(index) {this.currentIndex = index;this.currentTitle = this.audioList[index].title;// 先停止当前音乐this.$AudioContext.stop();// 更换播放地址this.$AudioContext.src = this.audioList[index].src;// 播放音乐this.handlePlay();
},
3.3.4 进度条功能实现

首先明确功能点：

  1. 根据音乐播放进度条增加，显示当前播放时长和总时长（可以根据定时任务获取最新音乐播放信息）；
  2. 可以拖动选择特定位置播放（通过touchmove与touchend事件监听实现）；
  3. 点击某一位置直接跳转对应位置播放（通过点击事件获取x轴位置）
// 递归循环获取最新音乐进度信息
recursionDeep() {clearTimeout(this.timer);if (this.paused) {return};this.timer = setTimeout(() => {if (!this.isMove) {this.setPlayInfo();this.recursionDeep();}}, 500)
},
// 进度条点击事件
progressClick(event) {const {x} = event.detail;const progressWidth = Math.floor(x / this.progressParentWidth * 100);this.playInfo.progressWidth = progressWidth > 100 ? 100 : progressWidth;console.log("event", event);this.progressMouseDown();
},
// 音乐进度条移动监听
progressMouseMove(event) {if (!this.$AudioContext.src) {return;}this.isMove = true;const {pageX} = event.changedTouches[0];const progressWidth = Math.floor(pageX / this.progressParentWidth * 100);this.playInfo.progressWidth = progressWidth > 100 ? 100 : progressWidth;
},
// 音乐进度条停止监听
progressMouseDown(event) {this.isMove = false;const currentTime = Math.floor(this.$AudioContext.duration * (this.playInfo.progressWidth / 100));this.$AudioContext.seek(currentTime);this.setPlayInfo();if (!this.$AudioContext.paused) {this.$AudioContext.pause();}this.handlePlay();
},

四、完整源码示例

4.1 示例图

在这里插入图片描述

4.2 main.js入口函数

import App from './App'import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'// 新建音乐对象挂载到原型上
const innerAudioContext = uni.createInnerAudioContext();
// 音乐播放报错监听
innerAudioContext.onError((res) => {console.log("音乐播放报错监听", res);
});
// 音乐加载中监听
innerAudioContext.onWaiting((res) => {console.log("音乐加载中监听", res);
});
Vue.prototype.$AudioContext = innerAudioContext;const app = new Vue({...App
})
app.$mount()

4.3 index.vue界面

<template><view class="content"><scroll-view class="main-container" scroll-y><view class="line_box" :class="currentIndex === index ? 'line_box bgc_line' : 'line_box'"v-for="(item, index) in audioList" :key="item.id" @click="handleCurrentAudio(index)">{{item.title}}</view></scroll-view><view class="audio_box"><view class="current_title" v-show="currentTitle">当前播放歌曲：{{currentTitle}}</view><view class="music-progress-bar" @click="progressClick"><view class="progress-bar-line" :style="{width: playInfo.progressWidth + '%'}" @touchmove="progressMouseMove"@touchend="progressMouseDown"></view></view><view class="show_time"><view>{{playInfo.currentValue}}</view><view>{{playInfo.durationValue}}</view></view><view class="audio_control"><view @click="hanleAudioChange('pre')">上一首</view><view @click="handlePlay">{{ paused ? '播放' : '暂停'}}</view><view @click="hanleAudioChange('next')">下一首</view></view></view></view>
</template><script>export default {data() {return {timer: null,currentTitle: '未完成之前',currentIndex: 0,paused: true,isMove: false,playInfo: {progressWidth: 2, // 滚动条currentTime: 0, // 当前音乐时间scurrentValue: '00:00', // 转换成时间展示duration: 0, // 当前音乐总时间sdurationValue: '00:00', // 总时间转换展示 },audioList: [{title: '未完成之前',src: 'https://music.163.com/song/media/outer/url?id=1453946527.mp3',id: 1453946527,},{title: '鲜花',src: 'https://music.163.com/song/media/outer/url?id=2086327879.mp3',id: 2086327879,},{title: '水星记',src: 'https://music.163.com/song/media/outer/url?id=441491828.mp3',id: 441491828,},{title: '人生有时候懂得放弃',src: 'https://music.163.com/song/media/outer/url?id=2139388989.mp3',id: 2139388989,},{title: '精卫',src: 'https://music.163.com/song/media/outer/url?id=1951069525.mp3',id: 1951069525,},],progressParentWidth: 0,}},onLoad() {this.$AudioContext.playbackRate = 2;if (this.audioList.length) {this.$AudioContext.src = this.audioList[this.currentIndex].src;this.currentTitle = this.audioList[this.currentIndex].title;this.setPlayInfo();}this.$AudioContext.onPlay((e) => {// 开始播放获取音乐信息this.setPlayInfo();});this.$AudioContext.onEnded((e) => {// 结束播放去播放下一首this.hanleAudioChange();});},onShow() {this.$nextTick(async () => {const query = uni.createSelectorQuery().in(this);query.select('.music-progress-bar').boundingClientRect(data => {this.progressParentWidth = data ? Math.floor(data.width) : 0;}).exec();});},onUnload() {// 卸载时关闭监听this.$AudioContext.offPlay();this.$AudioContext.offPlay();},methods: {// 进度条点击事件progressClick(event) {const {x} = event.detail;const progressWidth = Math.floor(x / this.progressParentWidth * 100);this.playInfo.progressWidth = progressWidth > 100 ? 100 : progressWidth;console.log("event", event);this.progressMouseDown();},// 音乐进度条移动监听progressMouseMove(event) {if (!this.$AudioContext.src) {return;}this.isMove = true;const {pageX} = event.changedTouches[0];const progressWidth = Math.floor(pageX / this.progressParentWidth * 100);this.playInfo.progressWidth = progressWidth > 100 ? 100 : progressWidth;},// 音乐进度条停止监听progressMouseDown(event) {this.isMove = false;const currentTime = Math.floor(this.$AudioContext.duration * (this.playInfo.progressWidth / 100));this.$AudioContext.seek(currentTime);this.setPlayInfo();if (!this.$AudioContext.paused) {this.$AudioContext.pause();}this.handlePlay();},// 音乐播放handlePlay() {this.$AudioContext.paused ? this.$AudioContext.play() : this.$AudioContext.pause();this.paused = this.$AudioContext.paused;this.recursionDeep();},// 选择目标音乐播放handleCurrentAudio(index) {this.currentIndex = index;this.currentTitle = this.audioList[index].title;// 先停止当前音乐this.$AudioContext.stop();// 更换播放地址this.$AudioContext.src = this.audioList[index].src;// 播放音乐this.handlePlay();},// 递归循环获取最新音乐进度信息recursionDeep() {clearTimeout(this.timer);if (this.paused) {return};this.timer = setTimeout(() => {if (!this.isMove) {this.setPlayInfo();this.recursionDeep();}}, 500)},// 秒转换为分钟secondsToMinutesWithSeconds(seconds) {const minutes = Math.floor(seconds / 60);const remainingSeconds = Math.floor(seconds % 60);return `${this.padZero(minutes)}:${this.padZero(remainingSeconds)}`;},// 补零padZero(number, length = 2) {var str = "" + number;while (str.length < length) {str = "0" + str;}return str;},// 设置播放对象setPlayInfo() {const currentTime = this.$AudioContext.currentTime || 0;const duration = this.$AudioContext.duration || 0;const progressWidth = duration === 0 ? '2' : Math.floor((currentTime / duration) * 100);const currentValue = this.secondsToMinutesWithSeconds(currentTime);const durationValue = this.secondsToMinutesWithSeconds(duration);this.playInfo = {currentTime,duration,progressWidth,currentValue,durationValue};},// 切换歌曲hanleAudioChange(type = 'next') {if (type === 'pre') {this.currentIndex = this.currentIndex === 0 ? this.audioList.length - 1 : this.currentIndex - 1;} else {this.currentIndex = this.currentIndex === this.audioList.length - 1 ? 0 : this.currentIndex + 1;};this.$AudioContext.src = this.audioList[this.currentIndex].src;this.currentTitle = this.audioList[this.currentIndex].title;// 播放歌曲this.handlePlay();},}}
</script><style>.content {width: 100vw;height: calc(100vh - 44px - env(safe-area-inset-top));background-color: #1A262D;color: #fff;}.main-container {width: 100vw;height: 46vh;}.line_box {display: flex;align-items: center;justify-content: center;width: 92%;height: 60px;border-radius: 8px;margin: 10px auto;border: 2px solid #eee;background-color: aquamarine;color: #333;font-weight: bold;}.audio_control {display: flex;align-items: center;justify-content: space-around;color: #333;margin-top: 40px;}.audio_control view {width: 100px;height: 40px;text-align: center;line-height: 40px;background: #edeeab;border: 1px solid #eee;border-radius: 6px;}.audio_box {width: 90%;margin: 30px auto;}.current_title {margin-bottom: 20px;font-weight: bold;font-size: 18px;}.bgc_line {background-color: #e1964b;}.show_time {width: 100%;display: flex;justify-content: space-between;margin-top: 12rpx;}// 音乐进度条.music-progress-bar {position: relative;width: 100%;height: 6rpx;border-radius: 6rpx;background-color: #f3e7d9;.progress-bar-line {position: absolute;top: 0%;left: 0%;width: 2%;height: 100%;border-radius: 6rpx;background-color: #e1964b;}.progress-bar-line::after {content: "";display: inline-block;position: absolute;right: 0%;top: 50%;transform: translateY(-50%);width: 20rpx;height: 20rpx;background-color: #fff;border-radius: 50%;}}
</style>

4.4 项目源码地址

https://gitee.com/yangdacongming/implementation-of-uniapp-music.git

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/10702.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

vue的css深度选择器 deep /deep/

vue的css深度选择器 deep /deep/

作用及概念 当 <style> 标签有 scoped 属性时&#xff0c;它的 CSS 只作用于当前组件中的元素&#xff0c;父组件的样式将不会渗透到子组件。在vue中是这样描述的&#xff1a; 处于 scoped 样式中的选择器如果想要做更“深度”的选择&#xff0c;也即&#xff1a;影响到子…
阅读更多...
vscode+clangd阅读Linux内核源码

vscode+clangd阅读Linux内核源码

1. 禁用或卸载官方C/C插件. 2. 安装clangd插件 3. 清除之前的产物 4. 生成.config文件 5.编译生成内核镜像 6.编译内核模块 7.编译设备树文件 8.生成compile_commands.json文件 运行上述命令后&#xff0c;在内核源码根目录生成了compile_commands.json文件 9.设置clangd插…
阅读更多...
Verlog-串口发送-FPGA

Verlog-串口发送-FPGA

Verlog-串口发送-FPGA 引言&#xff1a; ​ 随着电子技术的不断进步&#xff0c;串口通信已成为嵌入式系统和计算机外设中一种广泛使用的异步通信方式。串口通信因其简单性、可靠性以及对硬件资源的低要求&#xff0c;在数据传输领域扮演着重要角色。在FPGA&#xff08;现场可编…
阅读更多...
读天才与算法：人脑与AI的数学思维笔记25_涌现理论

读天才与算法：人脑与AI的数学思维笔记25_涌现理论

1. 人工智能新闻 1.1. 人工智能新闻报道算法的核心是如何将未经处理的原始数据转换成新闻报道 1.2. 很少有记者为美联社决定使用机器来帮助报道这些新闻持反对意见 1.2.1. 像“Wordsmith”这样的算法&#xff0c;具有自动化的洞察力、科学的叙事能力&#xff0c;现在正被应用…
阅读更多...
LINUX 精通 1——2.1.1 网络io与io多路复用select/poll/epoll

LINUX 精通 1——2.1.1 网络io与io多路复用select/poll/epoll

LINUX 精通 1 day12 20240509 算法刷题&#xff1a; 2道高精度 耗时 107min 课程补20240430 耗时&#xff1a;99 min day 13 20240512 耗时&#xff1a;200min 课程链接地址 前言 杂 工作5-10年 够用 费曼&#xff1a;不要直接抄&#xff0c;自己写&#xff1b;不要一个…
阅读更多...
【WEEK11】 【DAY6】员工管理系统第七部分【中文版】

【WEEK11】 【DAY6】员工管理系统第七部分【中文版】

2024.5.11 Saturday 接上文【WEEK11】 【DAY5】员工管理系统第六部分【中文版】 目录 10.8.删除及404处理10.8.1.修改list.html10.8.2.修改EmployeeController.java10.8.3.重启10.8.4. 404页面处理10.8.4.1.把404.html文件移入10.8.4.2.重启并运行 10.8.5.退出登录状态10.8.5.1…
阅读更多...
紫光计算机项目卓越中心负责人孙宇受邀为第十三届中国PMO大会演讲嘉宾

紫光计算机项目卓越中心负责人孙宇受邀为第十三届中国PMO大会演讲嘉宾

全国PMO专业人士年度盛会 紫光计算机科技有限公司信息技术中心项目总监&卓越中心负责人孙宇先生受邀为PMO评论主办的2024第十三届中国PMO大会演讲嘉宾&#xff0c;演讲议题为“PMO卓越中心核心能力拆解与落地-用创新绘制新蓝图”。大会将于6月29-30日在北京举办&#xff0c…
阅读更多...
Mistoline: 超高质量控线的Controlnet【附加代码演示】

Mistoline: 超高质量控线的Controlnet【附加代码演示】

MistoLine 是 SDXL-ControlNet 模型&#xff0c;可适应任何类型的线条图输入&#xff0c;具有高精确度和出色的稳定性。它可以根据用户提供的各种类型的线稿&#xff08;包括手绘草图、不同的 ControlNet 线稿预处理器和模型生成的轮廓&#xff09;生成高质量图像&#xff08;短…
阅读更多...
web入门——导航栏

web入门——导航栏

本专栏内容代码来自《响应式web&#xff08;HTML5CSS3Bootstrap&#xff09;》教材。 导航栏 实现代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content&…
阅读更多...
【harbor】harbor的搭建与使用

【harbor】harbor的搭建与使用

harbor的搭建与使用 文章目录 harbor的搭建与使用1. harbor的下载2. 创建ssl证书3.harbor的配置3. docker修改4.启动harbor5.使用docker总结 1. harbor的下载 harbor仓库地址&#xff1a;https://github.com/goharbor/harbor harbor主要是go语言写的&#xff0c;但是我们dock…
阅读更多...
金三银四面试题（二十七）：适配器模式知多少？

金三银四面试题（二十七）：适配器模式知多少？

什么是适配器模式 适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许将一个类的接口转换为客户期望的另一个接口。通过适配器&#xff0c;原本不兼容的接口可以一起工作&#xff0c;从而提高系统的灵活性和可扩展性。 关键元素&…
阅读更多...
java中EQ、NE、GE、GT、LE、LT

java中EQ、NE、GE、GT、LE、LT

关系运算符 包括EQ、NE、GE、GT、LE、LT几个&#xff0c;关系运算符返回的是真“True”或假“False”。 eq&#xff08;Equal to&#xff09; 等 运算符 &#xff0c;如果运算符两边相同则返回真&#xff0c;否则返回假&#xff1b; ne&#xff08;Not Equal to&#xff09; 不…
阅读更多...
Linux/Brainfuck

Linux/Brainfuck

Brainfuck Enumeration Nmap 扫描发现对外开放了 22&#xff0c;25&#xff0c;110&#xff0c;143&#xff0c;443 五个端口&#xff0c;使用 nmap 扫描端口详细信息 ┌──(kali㉿kali)-[~/vegetable/HTB/Insane] └─$ nmap -sC -sV -p 22,25,110,143,443 -oA nmap 10.10…
阅读更多...
避坑指南！RK3588香橙派yolov5生成RKNN模型！

避坑指南！RK3588香橙派yolov5生成RKNN模型！

地址1&#xff0c;转换模型 地址2&#xff0c;转换模型 地址3&#xff0c;解决ppa 下载k2 本文目录 一、将.pt模型转为onnx模型文件。&#xff08;Windows&#xff09;二、将.onnx模型转为.rknn模型文件。&#xff08;Linux&#xff09;三、将.rknn模型部署到开发板RK3588中…
阅读更多...
MyCat实现分库分表

MyCat实现分库分表

两个集群 两个库 两个表 搭建数据库服务使用docker启动两个mysql 3506 3507连接MyCat创建两个数据源连接MyCat创建集群 mycat创建逻辑库MyCat创建全局表广播表创建分片表mycat逻辑库MyCat插入数据mycat查看数据物理库3506查看数据物理库3507查看数据 ER表创建ER表mycat插入数据…
阅读更多...
射频识别技术RFID

射频识别技术RFID

射频识别技术RFID RFID介绍 射频识别&#xff1a; 英文名称是(Radio Frequency Identification)&#xff0c; 简称是“ RFID” 又称 无线射频识别&#xff0c; RFID是物联网的其中一种终端技术。 RFID是一种通信技术&#xff0c; 可通过无线电讯号耦合识别特定目标并读写相关…
阅读更多...
Python使用Rembg库去除图片背景

Python使用Rembg库去除图片背景

一、引入Rembg库 #库地址 https://github.com/danielgatis/rembg#CPU使用 pip install rembg # for library pip install rembg[cli] # for library cli#GPU使用&#xff08;系统支持onnxruntime-gpu&#xff09; pip install rembg[gpu] # for library pip install rembg[gp…
阅读更多...
基于ChatGLM+Langchain离线搭建本地知识库（免费）

基于ChatGLM+Langchain离线搭建本地知识库（免费）

目录 简介 服务部署 实现本地知识库 测试 番外 简介 ChatGLM-6B是清华大学发布的一个开源的中英双语对话机器人。基于 General Language Model (GLM) 架构&#xff0c;具有 62 亿参数。结合模型量化技术&#xff0c;用户可以在消费级的显卡上进行本地部署&#xff08;INT…
阅读更多...
深入理解 Kolmogorov–Arnold Networks (KAN)

深入理解 Kolmogorov–Arnold Networks (KAN)

深入理解 Kolmogorov–Arnold Networks (KAN) 最近&#xff0c;一篇名为 KAN: Kolmogorov–Arnold Network 的论文在机器学习领域引起了广泛关注。这篇论文提出了一种全新的神经网络视角&#xff0c;并提出了一种可以替代现有多层感知器&#xff08;MLP&#xff09;的新方案。要…
阅读更多...
19 分页：快速地址转换（TLB）

19 分页：快速地址转换（TLB）

通过上一节中的知识&#xff0c;可以知道使用分页作为核心机制来实现虚拟内存是比较不错的&#xff0c;但是因为复杂的查询和转换逻辑&#xff0c;导致性能开销比较大。这里就要使用硬件来提升了&#xff0c;便出现了地址转换旁路缓冲存储器&#xff08;TLB&#xff09;&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023