音视频系列--音频基本操作(音频裁剪,音频和音频混合,音频和视频混合)

article/2025/5/8 22:39:31

前面介绍了音频的基本原理,这篇文章继续来总结下音频的基本操作,包括裁剪混音和音频和视频的混合操作。

一、裁剪


下面Demo将一段输入mp3文件,根据startTime和endTime,进行裁剪,先解码成PCM文件,然后转码成WAV

//解码成PCM文件
public void decodeToPCM(String musicPath, String outPath, int startTime, int endTime) throws Exception {if (endTime < startTime) {return;}MediaExtractor mediaExtractor = new MediaExtractor();mediaExtractor.setDataSource(musicPath);int audioTrack = selectTrack(mediaExtractor);mediaExtractor.selectTrack(audioTrack);mediaExtractor.seekTo(startTime, MediaExtractor.SEEK_TO_CLOSEST_SYNC);MediaFormat oriAudioFormat = mediaExtractor.getTrackFormat(audioTrack);int maxBufferSize = 100 * 1000;if (oriAudioFormat.containsKey(MediaFormat.KEY_MAX_INPUT_SIZE)) {maxBufferSize = oriAudioFormat.getInteger(MediaFormat.KEY_MAX_INPUT_SIZE);} else {maxBufferSize = 100 * 1000;}ByteBuffer buffer = ByteBuffer.allocateDirect(maxBufferSize);MediaCodec mediaCodec = MediaCodec.createDecoderByType(oriAudioFormat.getString((MediaFormat.KEY_MIME)));mediaCodec.configure(oriAudioFormat, null, null, 0);File pcmFile = new File(outPath);FileChannel writeChannel = new FileOutputStream(pcmFile).getChannel();mediaCodec.start();MediaCodec.BufferInfo info = new MediaCodec.BufferInfo();int outputBufferIndex = -1;while (true) {int decodeInputIndex = mediaCodec.dequeueInputBuffer(100000);if (decodeInputIndex >= 0) {long sampleTimeUs = mediaExtractor.getSampleTime();if (sampleTimeUs == -1) {break;} else if (sampleTimeUs < startTime) {// 不用了mediaExtractor.advance();continue;} else if (sampleTimeUs > endTime) {break;}
//                获取到压缩数据info.size = mediaExtractor.readSampleData(buffer, 0);info.presentationTimeUs = sampleTimeUs;info.flags = mediaExtractor.getSampleFlags();//                下面放数据到dsp解码byte[] content = new byte[buffer.remaining()];buffer.get(content);
//                输出文件  方便查看
//                FileUtils.writeContent(content);
//                解码ByteBuffer inputBuffer = mediaCodec.getInputBuffer(decodeInputIndex);inputBuffer.put(content);mediaCodec.queueInputBuffer(decodeInputIndex, 0, info.size, info.presentationTimeUs, info.flags);
//                释放上一帧的压缩数据mediaExtractor.advance();}outputBufferIndex = mediaCodec.dequeueOutputBuffer(info, 100_000);while (outputBufferIndex >= 0) {ByteBuffer decodeOutputBuffer = mediaCodec.getOutputBuffer(outputBufferIndex);writeChannel.write(decodeOutputBuffer);//MP3  1   pcm2mediaCodec.releaseOutputBuffer(outputBufferIndex, false);outputBufferIndex = mediaCodec.dequeueOutputBuffer(info, 100_000);}}writeChannel.close();mediaExtractor.release();mediaCodec.stop();mediaCodec.release();}//编码成WAV
public void convertPcmToWav(String inputPath, String outputPath) {
//采样率44.1khz, 立体声, 双通道, 量化位数16new PcmToWavUtil(44100, AudioFormat.CHANNEL_IN_STEREO,2, AudioFormat.ENCODING_PCM_16BIT).pcmToWav(inputPath, outputPath);
}private int selectTrack(MediaExtractor mediaExtractor) {
//获取每条轨道int numTracks = mediaExtractor.getTrackCount();for (int i = 0; i < numTracks; i++) {
//            数据      MediaFormatMediaFormat format = mediaExtractor.getTrackFormat(i);String mime = format.getString(MediaFormat.KEY_MIME);if (mime.startsWith("audio/")) {return i;}}return -1;
}

上面PCM转为WAV就是在文件头部写入44个固定字节数据。详细代码看最后提出的代码位置

二、混和音频


下面Demo将一段输入mp3文件和视频的音频,根据startTime和endTime,进行裁剪合成,先解码成PCM文件,然后转码成合成的WAV文件

public void mixAudioTrack(Context context,final String videoInput,final String audioInput,final String output,final Integer startTimeUs, final Integer endTimeUs,int videoVolume,//视频声音大小int aacVolume//音频声音大小
) throws Exception {final File videoPcmFile = new File(Environment.getExternalStorageDirectory(), "video.pcm");final File musicPcmFile = new File(Environment.getExternalStorageDirectory(), "music.pcm");decodeToPCM(videoInput, videoPcmFile.getAbsolutePath(), startTimeUs, endTimeUs);decodeToPCM(audioInput, musicPcmFile.getAbsolutePath(), startTimeUs, endTimeUs);final File mixPcmFile = new File(Environment.getExternalStorageDirectory(), "mix.pcm");mixPcm(videoPcmFile.getAbsolutePath(), musicPcmFile.getAbsolutePath(), mixPcmFile.getAbsolutePath(), videoVolume, aacVolume);new PcmToWavUtil(44100, AudioFormat.CHANNEL_IN_STEREO,2, AudioFormat.ENCODING_PCM_16BIT).pcmToWav(mixPcmFile.getAbsolutePath(), output);
}private static float normalizeVolume(int volume) {return volume / 100f * 1;
}public static void mixPcm(String pcm1Path, String pcm2Path, String toPath, int volume1, int volume2) throws IOException {float vol1 = normalizeVolume(volume1);float vol2 = normalizeVolume(volume2);//一次读取  2kbyte[] buffer1 = new byte[2048];byte[] buffer2 = new byte[2048];// 待输出数据byte[] buffer3 = new byte[2048];FileInputStream is1 = new FileInputStream(pcm1Path);FileInputStream is2 = new FileInputStream(pcm2Path);//输出PCM 的FileOutputStream fileOutputStream = new FileOutputStream(toPath);short temp2, temp1;//   两个short变量相加 会大于short   声音int temp;boolean end1 = false, end2 = false;while (!end1 || !end2) {if (!end1) {end1 = (is1.read(buffer1) == -1);
//            音乐的pcm数据 写入到 buffer3System.arraycopy(buffer1, 0, buffer3, 0, buffer1.length);}if (!end2) {end2 = (is2.read(buffer2) == -1);int voice = 0;//一个声音 2 个字节for (int i = 0; i < buffer2.length; i += 2) {
//将低字节放高字节前面				temp1 = (short) ((buffer1[i] & 0xff) | (buffer1[i + 1] & 0xff) << 8);temp2 = (short) ((buffer2[i] & 0xff) | (buffer2[i + 1] & 0xff) << 8);temp = (int) (temp1 * vol1 + temp2 * vol2);
//边界监测                if (temp > 32767) {temp = 32767;} else if (temp < -32768) {temp = -32768;}buffer3[i] = (byte) (temp & 0xFF);buffer3[i + 1] = (byte) ((temp >>> 8) & 0xFF);}fileOutputStream.write(buffer3);}}is1.close();is2.close();fileOutputStream.close();
}

上面涉及到音频的混合操作,首先会将输入的音频解码成PCM,并且提取视频中的音频转换成PCM,然后接着就是对两个PCM文件操作。

上面的音频混合部分是以16位双通道为例计算的。

三、混合音视频


下面Demo将一段输入mp3文件和视频,根据startTime和endTime,进行裁剪合成,先解码成PCM文件,然后转码成合成MP4文件

public void mixVideoAndAudioTrack(Context context,final String videoInput,final String audioInput,final String output,final Integer startTimeUs, final Integer endTimeUs,int videoVolume,//视频声音大小int aacVolume//音频声音大小
) throws Exception {File cacheDir = Environment.getExternalStorageDirectory();File aacPcmFile = new File(cacheDir, "audio" + ".pcm");final File videoPcmFile = new File(cacheDir, "video" + ".pcm");//        MediaMetadataRetriever mediaMetadataRetriever = new MediaMetadataRetriever();
//        mediaMetadataRetriever.setDataSource(audioInput);
//        读取音乐时间
//        final int aacDurationMs = Integer.parseInt(mediaMetadataRetriever.extractMetadata(MediaMetadataRetriever.METADATA_KEY_DURATION));
//        mediaMetadataRetriever.release();MediaExtractor audioExtractor = new MediaExtractor();audioExtractor.setDataSource(audioInput);decodeToPCM(videoInput, videoPcmFile.getAbsolutePath(),startTimeUs, endTimeUs);//        final int videoDurationMs = (endTimeUs - startTimeUs) / 1000;decodeToPCM(audioInput, aacPcmFile.getAbsolutePath(), startTimeUs, endTimeUs);File adjustedPcm = new File(cacheDir, "混合后的" + ".pcm");mixPcm(videoPcmFile.getAbsolutePath(), aacPcmFile.getAbsolutePath(),adjustedPcm.getAbsolutePath(), videoVolume, aacVolume);File wavFile = new File(cacheDir, adjustedPcm.getName() + ".wav");new PcmToWavUtil(44100, AudioFormat.CHANNEL_IN_STEREO,2, AudioFormat.ENCODING_PCM_16BIT).pcmToWav(adjustedPcm.getAbsolutePath(), wavFile.getAbsolutePath());//混音的wav文件   + 视频文件   ---》  生成mixVideoAndAudio(videoInput, output, startTimeUs, endTimeUs, wavFile);
}private void mixVideoAndAudio(String videoInput, String output, Integer startTimeUs, Integer endTimeUs, File wavFile) throws IOException {// 初始化一个视频封装容器MediaMuxer mediaMuxer = new MediaMuxer(output, MediaMuxer.OutputFormat.MUXER_OUTPUT_MPEG_4);MediaExtractor mediaExtractor = new MediaExtractor();mediaExtractor.setDataSource(videoInput);
// 拿到视频轨道的索引int videoIndex = selectTrack(mediaExtractor, false);
// 拿到音频轨道的索引int audioIndex = selectTrack(mediaExtractor, true);
//  视频配置MediaFormat videoFormat = mediaExtractor.getTrackFormat(videoIndex);
//开辟了一个轨道空的轨道,只有写数据,才会变真实mediaMuxer.addTrack(videoFormat);//视频中音频轨道   应该取自于原视频的音频参数MediaFormat audioFormat = mediaExtractor.getTrackFormat(audioIndex);int audioBitrate = audioFormat.getInteger(MediaFormat.KEY_BIT_RATE);audioFormat.setString(MediaFormat.KEY_MIME, MediaFormat.MIMETYPE_AUDIO_AAC);//添加一个空的轨道  轨道格式取自 视频文件,跟视频所有信息一样int muxerAudioIndex = mediaMuxer.addTrack(audioFormat);//音频轨道开辟好了,输出开始工作mediaMuxer.start();//音频的wavMediaExtractor pcmExtrator = new MediaExtractor();pcmExtrator.setDataSource(wavFile.getAbsolutePath());int audioTrack = selectTrack(pcmExtrator, true);pcmExtrator.selectTrack(audioTrack);MediaFormat pcmTrackFormat = pcmExtrator.getTrackFormat(audioTrack);//最大一帧的大小int maxBufferSize = 0;if (audioFormat.containsKey(MediaFormat.KEY_MAX_INPUT_SIZE)) {maxBufferSize = pcmTrackFormat.getInteger(MediaFormat.KEY_MAX_INPUT_SIZE);} else {maxBufferSize = 100 * 1000;}MediaFormat encodeFormat = MediaFormat.createAudioFormat(MediaFormat.MIMETYPE_AUDIO_AAC,44100, 2);//参数对应-> mime type、采样率、声道数encodeFormat.setInteger(MediaFormat.KEY_BIT_RATE, audioBitrate);//比特率
//            音质等级encodeFormat.setInteger(MediaFormat.KEY_AAC_PROFILE, MediaCodecInfo.CodecProfileLevel.AACObjectLC);
//            解码  那段encodeFormat.setInteger(MediaFormat.KEY_MAX_INPUT_SIZE, maxBufferSize);
//             解码 那MediaCodec encoder = MediaCodec.createEncoderByType(MediaFormat.MIMETYPE_AUDIO_AAC);
//            配置AAC 参数  编码 pcm   重新编码     视频文件变得更小encoder.configure(encodeFormat, null, null, MediaCodec.CONFIGURE_FLAG_ENCODE);encoder.start();
//            容器ByteBuffer buffer = ByteBuffer.allocateDirect(maxBufferSize);MediaCodec.BufferInfo info = new MediaCodec.BufferInfo();boolean encodeDone = false;while (!encodeDone) {int inputBufferIndex = encoder.dequeueInputBuffer(10000);if (inputBufferIndex >= 0) {long sampleTime = pcmExtrator.getSampleTime();if (sampleTime < 0) {
//               pts小于0  来到了文件末尾 通知编码器  不用编码了encoder.queueInputBuffer(inputBufferIndex, 0, 0, 0, MediaCodec.BUFFER_FLAG_END_OF_STREAM);} else {int flags = pcmExtrator.getSampleFlags();int size = pcmExtrator.readSampleData(buffer, 0);ByteBuffer inputBuffer = encoder.getInputBuffer(inputBufferIndex);inputBuffer.clear();inputBuffer.put(buffer);inputBuffer.position(0);encoder.queueInputBuffer(inputBufferIndex, 0, size, sampleTime, flags);pcmExtrator.advance();}}
//                获取编码完的数据int outputBufferIndex = encoder.dequeueOutputBuffer(info, TIMEOUT);while (outputBufferIndex >= 0) {if (info.flags == MediaCodec.BUFFER_FLAG_END_OF_STREAM) {encodeDone = true;break;}ByteBuffer encodeOutputBuffer = encoder.getOutputBuffer(outputBufferIndex);mediaMuxer.writeSampleData(muxerAudioIndex, encodeOutputBuffer, info);encodeOutputBuffer.clear();encoder.releaseOutputBuffer(outputBufferIndex, false);outputBufferIndex = encoder.dequeueOutputBuffer(info, TIMEOUT);}}//把音频添加好了if (audioTrack >= 0) {//解选中音频mediaExtractor.unselectTrack(audioTrack);}//选中视频mediaExtractor.selectTrack(videoIndex);mediaExtractor.seekTo(startTimeUs, MediaExtractor.SEEK_TO_PREVIOUS_SYNC);maxBufferSize = videoFormat.getInteger(MediaFormat.KEY_MAX_INPUT_SIZE);buffer = ByteBuffer.allocateDirect(maxBufferSize);//封装容器添加视频轨道信息while (true) {long sampleTimeUs = mediaExtractor.getSampleTime();if (sampleTimeUs == -1) {break;}if (sampleTimeUs < startTimeUs) {mediaExtractor.advance();continue;}if (endTimeUs != null && sampleTimeUs > endTimeUs) {break;}info.presentationTimeUs = sampleTimeUs - startTimeUs + 600;info.flags = mediaExtractor.getSampleFlags();info.size = mediaExtractor.readSampleData(buffer, 0);if (info.size < 0) {break;}mediaMuxer.writeSampleData(videoIndex, buffer, info);mediaExtractor.advance();}try {pcmExtrator.release();mediaExtractor.release();encoder.stop();encoder.release();mediaMuxer.release();} catch (Exception e) {}}

1、先将音频和视频中的音频合成
2、然后再让合成后的音频和视频混合

四、视频和视频拼接


下面Demo是拼接两个视频

public static boolean appendVideo(String inputPath1, String inputPath2, String outputPath) throws IOException {MediaMuxer mediaMuxer = new MediaMuxer(outputPath,MediaMuxer.OutputFormat.MUXER_OUTPUT_MPEG_4);MediaExtractor videoExtractor1 = new MediaExtractor();videoExtractor1.setDataSource(inputPath1);MediaExtractor videoExtractor2 = new MediaExtractor();videoExtractor2.setDataSource(inputPath2);int videoTrackIndex = -1;int audioTrackIndex = -1;long file1_video_duration = 0L;long file1_audio_duration = 0L;int sourceVideoTrack1 = -1;int sourceAudioTrack1 = -1;for (int index = 0; index < videoExtractor1.getTrackCount(); index++) {MediaFormat format = videoExtractor1.getTrackFormat(index);String mime = format.getString(MediaFormat.KEY_MIME);if (mime.startsWith("video/")) {sourceVideoTrack1 = index;videoTrackIndex = mediaMuxer.addTrack(format);file1_video_duration = format.getLong(MediaFormat.KEY_DURATION);} else if (mime.startsWith("audio/")) {sourceAudioTrack1 = index;audioTrackIndex = mediaMuxer.addTrack(format);file1_audio_duration = format.getLong(MediaFormat.KEY_DURATION);}}int sourceVideoTrack2 = -1;int sourceAudioTrack2 = -1;for (int index = 0; index < videoExtractor2.getTrackCount(); index++) {MediaFormat format = videoExtractor2.getTrackFormat(index);String mime = format.getString(MediaFormat.KEY_MIME);if (mime.startsWith("video/")) {sourceVideoTrack2 = index;} else if (mime.startsWith("audio/")) {sourceAudioTrack2 = index;}}if (mediaMuxer == null)return false;mediaMuxer.start();//1.write first video track into muxer.videoExtractor1.selectTrack(sourceVideoTrack1);MediaCodec.BufferInfo info = new MediaCodec.BufferInfo();info.presentationTimeUs = 0;ByteBuffer buffer = ByteBuffer.allocate(500 * 1024);int sampleSize = 0;while ((sampleSize = videoExtractor1.readSampleData(buffer, 0)) >= 0) {info.offset = 0;info.size = sampleSize;info.flags = videoExtractor1.getSampleFlags();info.presentationTimeUs = videoExtractor1.getSampleTime();mediaMuxer.writeSampleData(videoTrackIndex, buffer, info);videoExtractor1.advance();}//2.write first audio track into muxer.videoExtractor1.unselectTrack(sourceVideoTrack1);videoExtractor1.selectTrack(sourceAudioTrack1);info = new MediaCodec.BufferInfo();info.presentationTimeUs = 0;buffer = ByteBuffer.allocate(500 * 1024);sampleSize = 0;while ((sampleSize = videoExtractor1.readSampleData(buffer, 0)) >= 0) {info.offset = 0;info.size = sampleSize;info.flags = videoExtractor1.getSampleFlags();info.presentationTimeUs = videoExtractor1.getSampleTime();mediaMuxer.writeSampleData(audioTrackIndex, buffer, info);videoExtractor1.advance();}//3.write second video track into muxer.videoExtractor2.selectTrack(sourceVideoTrack2);info = new MediaCodec.BufferInfo();info.presentationTimeUs = 0;buffer = ByteBuffer.allocate(500 * 1024);sampleSize = 0;while ((sampleSize = videoExtractor2.readSampleData(buffer, 0)) >= 0) {info.offset = 0;info.size = sampleSize;info.flags = videoExtractor2.getSampleFlags();info.presentationTimeUs = videoExtractor2.getSampleTime() + file1_video_duration;mediaMuxer.writeSampleData(videoTrackIndex, buffer, info);videoExtractor2.advance();}//4.write second audio track into muxer.videoExtractor2.unselectTrack(sourceVideoTrack2);videoExtractor2.selectTrack(sourceAudioTrack2);info = new MediaCodec.BufferInfo();info.presentationTimeUs = 0;buffer = ByteBuffer.allocate(500 * 1024);sampleSize = 0;while ((sampleSize = videoExtractor2.readSampleData(buffer, 0)) >= 0) {info.offset = 0;info.size = sampleSize;info.flags = videoExtractor2.getSampleFlags();info.presentationTimeUs = videoExtractor2.getSampleTime() + file1_audio_duration;mediaMuxer.writeSampleData(audioTrackIndex, buffer, info);videoExtractor2.advance();}videoExtractor1.release();videoExtractor2.release();mediaMuxer.stop();mediaMuxer.release();return true;
}

注意,上面音频和视频轨道pts需要分别记录,不然写入会报这样的错
在这里插入图片描述

详细代码


http://chatgpt.dhexx.cn/article/C1iHRWEq.shtml

相关文章

android音频资源,android音频编辑之音频裁剪的示例代码

前言 本篇开始讲解音频编辑的具体操作&#xff0c;从相对简单的音频裁剪开始。要进行音频裁剪&#xff0c;我的方案是开启一个Service服务用于音频裁剪的耗时操作&#xff0c;主界面发送裁剪命令&#xff0c;同时注册EventBus接受裁剪的消息(当然也可以使用广播接受的方式)。因…

android裁剪控件,Android 仿抖音音频裁剪控件

效果图 QQ图片20201126164657.jpg 功能要求:绘制音频效果,音乐播放后进度滚动,控件可拖动,拖动后获取新的起始时间 (后期会加入根据音乐各个时段分贝大小来动态显示音律线的长短) 控件功能实现具体代码: package com.cj.customwidget.widget import android.content.Conte…

如何剪切音乐的一部分?来试试这个方法

音频剪切和合并是音频编辑中常见的操作&#xff0c;它可以用来去除不必要的部分或者将多个音频片段组合成一个完整的作品。在今天的数字化时代&#xff0c;有许多软件和工具可以帮助我们完成这个任务。 那你们知道具体的音频剪切合并的方法是什么吗&#xff1f;如果还不太清楚…

如何裁剪音频文件?裁剪音频的方法有什么?

通常我们在剪辑视频时&#xff0c;为了让视频更加有感染力&#xff0c;我们会加上各种各样的音频丰富视频的内容&#xff0c;而且在选取音频时&#xff0c;一般都是会采用它的高潮部分。那么如何裁剪音频文件来达到想要的效果呢&#xff1f;裁剪音频的方法又有什么&#xff1f;…

常用停用词表整理(哈工大停用词表,百度停用词表等)

辣鸡CSDN https://github.com/goto456/stopwords https://zhuanlan.zhihu.com/p/30002654 转载于:https://www.cnblogs.com/0n-the-way/p/10544285.html

文本分析--停用词集合(结合哈工大停用词表、四川大学机器智能实验室停用词库、百度停用词表等)

文本分析过程中&#xff0c;中文文本分析是一个非常重要的环节&#xff0c;而停用词表的选择也是非常关键的&#xff0c;网络流行了多种版本的停用词表&#xff0c;都具有各自的特点&#xff0c;现在对网络流行的多种停用词表继续去重处理&#xff0c;综合实现新的停用词表。 …

【python】构建停用词表(文末附链接)

构建停用词表 构建停用词表是数据预处理的必要步骤&#xff0c;可以减小不必要的开销。 哈工大、百度、川大等停用词表见GitHub链接&#xff1a;https://github.com/goto456/stopwords 经实验和观察证明&#xff0c;’cn_stopwords.txt‘文件的停用词大多是否定词&#xff1…

stopwords.txt中英文数据集,四川大学机器智能实验室停用词库,哈工大停用词表,中文停用词表,百度停用词表百度网盘下载

今天找stopwords.txt数据集找了好长时间&#xff0c;真是气死了&#xff0c;好多都是需要金币&#xff0c;这数据集不是应该共享的么。故搜集了一些数据集&#xff0c;主要包括四川大学机器智能实验室停用词库,哈工大停用词表,中文停用词表,百度停用词表和一些其他的stopword.t…

python停用词表整理_python停用词表

广告关闭 腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! stop_words:设置停用词表,这样的词我们就不会统计出来(多半是虚拟词,冠词等等),需要列表结构,所以代码中定义了一个函数来处理停用词表...前言前文给大家…

python文本分析--停用词表的使用

之前听说停用词表&#xff0c;没有上手使用过&#xff0c;真正操作的时候发现有很多东西没有学透彻。这里总结一下&#xff0c;去停用词的思想&#xff1a;在原始文本集中去掉不需要的词汇&#xff0c;字符。虽然有通用的停用词表&#xff0c;但是如果想提高后续的分词效果&…

uniapp使用阿里图标

效果图&#xff1a; 前言 随着uniApp的深入人心&#xff0c;我司也陆续做了几个使用uniapp做的移动端跨平台软件&#xff0c;在学习使用的过程中深切的感受到了其功能强大和便捷&#xff0c;今日就如何在uniapp项目中使用阿里字体图标的问题为大家献上我的一点心得&#xff0…

iconfont—阿里图标的使用

阿里图标库为我们提供了许多丰富精美的图标&#xff0c; 可以通过代码引入的方式将图标库引入到我们的项目中&#xff0c;用来美化我们的界面。iconfont 的使用方式有以下几种&#xff1a; 方式一&#xff1a;font-class 在线引入 打开网址进入首页&#xff0c;输入我们想要的…

java前端中的icon_阿里巴巴矢量图标库Iconfont的使用方法

前言 现在网络上有很多矢量图标库&#xff0c;但是能自定义的却很少&#xff0c;不能自定义的体积就很大&#xff0c;造成不必要的浪费。阿里巴巴矢量图标库Iconfont很好的规避了这个问题&#xff0c;能够自定义添加图标到你定义的项目中&#xff0c;运用也很简单。 选择图标 打…

MUI项目中使用阿里巴巴矢量图标库(保姆篇)

话不多说,直接进入主题. 一、要在MUI项目中使用阿里图标库&#xff0c; 就得先进入阿里图标库的官网 这里是官网网址: https://www.iconfont.cn/ 下图是首页的样子 二、使用阿里图标的方法有很多种,&#xff0c;这里就说一下我使用的这种 1.在搜索框中输入关键字&#xff0c;…

微信小程序如何使用阿里妈妈iconfont图标库

1、首先进入iconfont首页&#xff0c;没有账号的先注册账号 http://www.iconfont.cn/ 2、选择需要的图标&#xff0c;加入到你的小车中 3、在这里新建一个项目将图标加进去&#xff0c;这个时候就可以查看并且下载下来了 4、点击download code将图标代码下载下来&#xff0c;…

基于Java的阿里妈妈数据抓取技术

基于Java的阿里妈妈数据抓取技术 前言&#xff1a; 对于需要登录的网站爬虫最大的困难就是需要登录&#xff0c;然后才能获取到数据&#xff0c;如微博&#xff0c;阿里妈妈&#xff0c;webqq等。之前也有看过使用浏览器登录到网站后直接从浏览器中获取cookie的文章&#xff0…

uni-app中引入iconfont阿里巴巴矢量图标库

一&#xff1a;首先看一下图标 二&#xff1a;将icon.css文件放到项目中。 在static下面新建icon.css文件&#xff08;一般是建在common文件下面&#xff0c;建在其他位置上也可以&#xff09;&#xff0c;将iconfont里面的内容复制到icon.css。 这里要对icon.css内容做一些改变…

引入阿里iconfont图标方法以及注意事项

背景 在我们做日常项目时&#xff0c;通常会用到icon图标或者是一些图标字体&#xff0c;阿里iconfont是我们选择的较多的一种&#xff0c;下面我将会介绍使用方法和几种常用的引用方式 iconfont新建项目 官网&#xff1a;https://www.iconfont.cn/ 在首页选择【图标管理】-…

如何在代码里添加并使用阿里巴巴矢量图标-iconfont,在此常用有三种引入方法

iconfont-阿里巴巴矢量图库 在登录好账号的前提下进行以下操作&#xff1a; 添加icon&#xff1a; 首先搜索你想要的icon名&#xff0c;比如&#xff1a;首页选好你想要的图——加入购物车——添加至项目&#xff08;没有项目的话可以新建项目&#xff0c;如果需要很多icon&a…

阿里巴巴icon图标尽在掌握(前端如何引入icon库,美丽图标随你处置T.T)

前端如何引入icon库 挑选图标1.进入阿里矢量图标库[iconfont图标库地址](https://www.iconfont.cn/)2.寻找自己需要的图标加入购物车3.进入购物车&#xff0c;下载代码 引用图标我们先来看看下载的需要加入的css代码直接调用封装好的调用效果展示 挑选图标 1.进入阿里矢量图标…