深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上鸿蒙开发知识点,真正体系化!
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新
Row() {
Button(“-”)
.onClick(async event => {
const newValue = this.frequency - this.step // 1. 把当前的频率减掉预设的步进
this.frequency = Math.max(newValue, 0) // 2. 控制频率大于0
this.updateFrequency() // 3. 让播放器更新频率
})
.fontSize(60)
.fontColor(this.mainColor)
.backgroundColor(“opaque”)
Text(${this.frequency} Hz
)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.fontColor(this.mainColor)
Button(“+”)
.onClick(async event => {
const newValue = this.frequency + this.step // 4. 把当前的频率增加预设的步进
this.frequency = Math.min(newValue, 30000) // 5. 控制频率小于三万
this.updateFrequency() // 6. 让播放器更新频率
})
.fontSize(60)
.fontColor(this.mainColor)
.backgroundColor(“opaque”)
}
.margin({ top: “30%” })
- 频率下方加入一些使用提示
Text(“上下滑动屏幕\n以调整频率”)
.fontColor(this.subtitleColor)
.textAlign(TextAlign.Center)
.margin({ top: 20 })
Text(this.readmeRecord ? “使用说明” : “使用必读!”)
.fontColor(this.readmeRecord ? “#2A1EB1” : Color.Red)
.fontSize(this.readmeRecord ? 16 : 24)
.margin({ top: 20 })
.onClick(() => {
router.pushUrl({ url: ‘pages/ReadmePage’ }) // 1. 跳转readme界面
this.readmeRecord = true // 2. 首次使用的时候会使跳转按钮更显眼,跳转过以后就恢复正常UI。用一个state变量来控制显示状态
preferences.getPreferences(getContext(this), “default”).then((preference) => {
preference.put(“readmeRecord”, true) // 3. 记录到preference
preference.flush()
})
})
- 界面底部的播放/停止按钮
Button(this.playing ? “停止” : “播放”)
.fontColor(this.bgColor)
.fontSize(30)
.height(60)
.backgroundColor(this.mainColor)
.width(“100%”)
.type(ButtonType.Normal)
.onClick(() => {
this.playing ? this.stop() : this.play()
this.playing = !this.playing
})
至此,软件的基本功能就架设完成了。接下来还可以加一点实用功能。
- 选择波形。由于没有找到类似iOS中的segment组件,这里直接用Text来做手动布局。
@Builder
waveTypeSelector() {
Row() {
ForEach(this.waveOptions, (item: string, index: number) => {
Image(index === this.index ? item[0] : item[1])
.width(50)
.height(50)
.backgroundColor(index === this.index ? this.selectedBgColor : this.mainColor)
.padding(2)
.borderRadius({
topLeft: index === 0 ? 20 : 0, // 1. 第一个选项左边做圆角
bottomLeft: index === 0 ? 20 : 0,
topRight: index === this.waveOptions.length - 1 ? 20 : 0, // 2. 最后一个选项右边做圆角
bottomRight: index === this.waveOptions.length - 1 ? 20 : 0
})
.onClick(() => {
this.setIndex(index)
})
}, (item: string) => item)
}
.margin({ top: 20 })
}
这是一个独立的模块,最后集成到build()方法里
this.waveTypeSelector()
- 管理预设的频率和波形
@Builder
presets() {
Row() {
ForEach(this.presetsData, (item: PresetModel, index: number) => {
Column() {
if (this.isEditMode) {
Badge({ // 1. 如果是编辑模式,需要在图标右上角加一个badge,用于删除预设
value: “X”,
style: {
badgeColor: Color.Red
}
}) {
this.presetItemImage(this.waveImageFromWaveType(item.waveType))
}
.onClick(event => {
if (event.x > 32 && event.y < 16) { // 2. 右上角的badge不能设置点击,需要在整个badge控件上做点击位置判断,如果在badge图标的范围内,就删除预设数组相应位置的数据。
this.presetsData.splice(index, 1)
}
})
} else { // 3. 如果不是编辑模式,直接显示图片
Flex() {
this.presetItemImage(this.waveImageFromWaveType(item.waveType))
}
.width(50)
.height(50)
.onClick(() => {
this.index = item.waveType // 4. 不是编辑模式的时候,点击图片,设置当前的波形和频率
this.frequency = item.frequency
})
}
Text(${item.frequency} Hz
)
.fontColor(this.mainColor)
.fontSize(16)
.margin({ top: 10 })
}
.width(64)
.height(80)
.margin({ right:
index < this.presetsData.length - 1 ? 30 :
this.isEditMode ? 30 :
this.isPresetFull() ? 0 : 30 })
}, (item: string) => item)
Column() { // 5. 预设数组右边放置一个添加/完成按钮
Image(this.isEditMode ? $r(“app.media.prst_check”) : $r(“app.media.prst_add”))
.width(50)
.height(50)
.backgroundColor(this.isEditMode ? this.mainColor : this.bgColor)
.borderColor(this.mainColor)
.borderWidth(4)
.borderRadius(25)
.onClick(() => {
if (this.isEditMode) { // 6. 编辑模式的时候点击退出编辑模式
this.isEditMode = false
} else { // 7. 非编辑模式的时候点击添加预设,添加之后把预设数组写入preference
if (this.isPresetFull()) {
return
}
this.presetsData.push({ waveType: this.index, frequency: this.frequency })
preferences.getPreferences(getContext(this), “default”).then((preference) => {
preference.put(“presets”, JSON.stringify(this.presetsData))
preference.flush()
})
}
})
Text(this.isEditMode ? “完成” : “添加预设”)
.fontSize(16)
.fontColor(this.mainColor)
.margin({ top: 10 })
}
.width(64)
.height(80)
.visibility(this.isEditMode ? Visibility.Visible :
this.isPresetFull() ? Visibility.None : Visibility.Visible) // 8. 预设数量有上限,达到上限以后不显示增加按钮
}
.margin({ top: 20 })
}
@Builder
presetItemImage(image: Resource) {
Image(image)
.width(50)
.height(50)
.backgroundColor(this.mainColor)
.borderRadius(25)
.gesture(LongPressGesture()
.onAction(() => {
this.isEditMode = true
})
)
}
生成声波
思路(可以跳过)
形成声波并播放是这个App的核心功能,如何实现这个功能,属实走了很多弯路。起初认为这是一个计算密集任务,在网上查到了一个生成正弦波并输出wav文件的C语言实现,并开了一个C工程来验证功能。可以成功调整声波频率,并生成wav文件。
#include <stdio.h>
#include <stdlib.h>
#include <math.h>
#include “sndfile.h”
#define SAMPLE_RATE 44100 // Sample rate in Hz
#define DURATION 5.0 // Duration in seconds
#define AMPLITUDE 0.5 // Amplitude of the sine wave
#define FREQUENCY 440.0 // Frequency in Hz
int main() {
// Calculate the number of samples
int num_samples = (int)(SAMPLE_RATE * DURATION);
// Open the output file for writing
SF_INFO sfinfo;
sfinfo.samplerate = SAMPLE_RATE;
sfinfo.channels = 1; // Mono
sfinfo.format = SF_FORMAT_WAV | SF_FORMAT_PCM_16;
SNDFILE* outfile = sf_open(“sine_wave.wav”, SFM_WRITE, &sfinfo);
if (!outfile) {
printf(“Error: Unable to open output file\n”);
return 1;
}
// Generate and write the sine wave to the file
double phase = 0.0;
for (int i = 0; i < num_samples; i++) {
double value = AMPLITUDE * sin(2.0 * M_PI * FREQUENCY * i / SAMPLE_RATE);
if (sf_writef_double(outfile, &value, 1) != 1) {
printf(“Error writing to file\n”);
return 1;
}
}
// Close the output file
sf_close(outfile);
printf(“Sine wave generated and saved to ‘sine_wave.wav’\n”);
return 0;
}
可以看到这段代码里面依赖三方库sndfile。所以起初为了把这段C代码放进App里,在native包上面研究了很久。包括怎么处理三方库sndfile的依赖,以及sndfile对其他库的依赖。尝试过直接集成源码,也尝试过编译不同处理器架构的so文件。但发现工作量太大,另外涉及到的技术栈不熟悉,花太多精力搞这个功能。之后换了个思路,找了一份不依赖三方库生成正弦波的C代码。
#include <stdio.h>
#include <stdint.h>
#include <math.h>
#define SAMPLE_RATE 44100 // Sample rate in Hz
#define DURATION 1 // Duration of the sine wave in seconds
#define AMPLITUDE 0.5 // Amplitude of the sine wave
#define FREQUENCY 440.0 // Frequency of the sine wave in Hz
#define NUM_CHANNELS 1 // Number of audio channels (1 for mono, 2 for stereo)
// Function to write a 16-bit PCM sample to a file
void write_sample(FILE *file, int16_t sample) {
fwrite(&sample, sizeof(int16_t), 1, file);
}
int main() {
FILE *wav_file;
int16_t sample;
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
g-k7XHDhZg-1715595028734)]
[外链图片转存中…(img-yKmysDRe-1715595028734)]
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!