音频波形_使用Cloudinary从音频生成波形图像

川长思鸟来 2023-02-22 03:32 6阅读 0赞

音频波形

I've been working a lot with visualizations lately, which is a far cry from your normal webpage element interaction coding; you need advanced geometry knowledge, render and performance knowledge, and much more.  It's been a great learning experience but it can be challenging and isn't always an interest of all web developers.  That's why we use apps and services specializing in complex tasks like [Cloudinary][]: we need it done quickly and by a tool written by an expert.

我最近在可视化方面做了大量工作，这与您正常的网页元素交互编码相去甚远。 您需要高级的几何知识，渲染和性能知识，以及更多。 这是一次很棒的学习经历，但它可能具有挑战性，并不总是所有Web开发人员都感兴趣。 这就是为什么我们使用专门处理诸如[Cloudinary之][Cloudinary]类的复杂任务的应用程序和服务的原因：我们需要通过专家编写的工具快速完成它。

While my previous experiments have been with images ([Image Optimization][], [Remove Photo Backgrounds][], and [Automatic Image Tagging][]), [Cloudinary][] also has the ability to manipulate video and audio files, as well as optimize delivery.  This next experiment will mix imagery and media: we'll generate waveform images from an audio file!

虽然我之前的实验是使用图像( [图像优化][Image Optimization] ， [删除照片背景][Remove Photo Backgrounds]和[自动图像标记][Automatic Image Tagging] )，但[Cloudinary][]还具有处理视频和音频文件以及优化传递的能力。 下一个实验将混合图像和媒体：我们将从音频文件生成波形图像！

**Step 1: Upload the File** **第1步：上传文件**

The first step is uploading the media file to Cloudinary, which you can automate with code or manually do so within the Cloudinary control panel.  Let's presume the file is up on Cloudinary.

第一步是将媒体文件上传到Cloudinary，您可以使用代码自动执行或在Cloudinary控制面板中手动执行。 我们假设文件在Cloudinary上。

**Step 2: Generate Image** **步骤2：产生影像**

You can use any number of languages to interact with Cloudinary's API but for the sake of this experiment we'll use Node.js and JavaScript.  And the JavaScript required to generate and retrieve the basic waveform image?  Much less than you think:

您可以使用多种语言与Cloudinary的API进行交互，但是为了进行本实验，我们将使用Node.js和JavaScript。 以及生成和检索基本波形图像所需JavaScript？ 比您想象的要少得多：

var result = cloudinary.image("Lights_qh6vve.png", {
    	height: 200,
    	width: 500,
    	flags: "waveform",
    	resource_type: "video"
    });

So what exactly happens with the code above?  Let's go through it:

那么上面的代码到底发生了什么？ 让我们来看一下：

*  The first argument, `Lights_qh6vve.png`, is the name of the uploaded MP3 file, replacing `.mp3` with `.png`
    
    第一个参数`Lights_qh6vve.png`是上载的MP3文件的名称，将`.mp3`替换为`.png`
 *  The second argument provides the desired image settings, customizing height and width of generated image...
    
    第二个参数提供所需的图像设置，自定义生成图像的高度和宽度...
 *  ...while `flags: waveform` and `resource_type: video` let Cloudinary know you want to generate the waveform image
    
    ...而`flags: waveform`和`resource_type: video`让Cloudinary知道您要生成波形图像

The result is an `img` tag:

结果是一个`img`标签：

..which looks like:

..看起来像：

![format_png][]

**Customizing the Image** **自定义图像**

Cloudinary provides flexibility in image generation so let's create a more customized waveform image.  Let's play with the colors:

Cloudinary在图像生成方面提供了灵活性，因此让我们创建一个更自定义的波形图像。 让我们玩一下颜色：

var result = cloudinary.image("Lights_qh6vve.png", {
    	height: 200,
    	width: 500,
    	flags: "waveform",
    	resource_type: "video",
    	background: '#acd7e5',
    	color: '#ffda7f'
    });

These colors generate a waveform image that looks like this:

这些颜色生成的波形图像如下所示：

![format_png 1][]

Next we can use offset properties to get just a snippet of the waveform image:

接下来，我们可以使用偏移量属性获取波形图像的片段：

var result = cloudinary.image("Lights_qh6vve.png", {
    	height: 200,
    	width: 500,
    	flags: "waveform",
    	resource_type: "video",
    	background: '#acd7e5',
    	color: '#ffda7f',
    	start_offset: 1, // in seconds
    	end_offset: 240
    });

Which gives us this sharp image:

这给了我们清晰的图像：

![format_png 2][]

This experimentation was a lot of fun, and proves waveform image creation is just another amazing function provided by Cloudinary.  [Cloudinary][] is (an awesome) one-stop shop for uploading manipulating and delivering images and video.  If you need to manipulate image or simply think you may need to do so in the future, give Cloudinary a good look -- they will do more than you think!

该实验非常有趣，并且证明了创建波形图像只是Cloudinary提供的另一个惊人功能。 [Cloudinary][]是(很棒的)一站式商店，用于上载操纵和传送图像和视频。 如果您需要操纵图像或者只是想在将来可能需要操纵图像，请给Cloudinary一个好看的外观-它们将比您想像的要多！

> 翻译自: [https://davidwalsh.name/generate-waveform-images-audio-cloudinary][https_davidwalsh.name_generate-waveform-images-audio-cloudinary]

音频波形

[Cloudinary]: http://cloudinary.com/?utm_source=DWB&utm_medium=Sponsored_Post_5&utm_campaign=Waveform_Images
[Image Optimization]: https://davidwalsh.name/image-optimization-cloudinary
[Remove Photo Backgrounds]: https://davidwalsh.name/remove-photo-backgrounds-cloudinary
[Automatic Image Tagging]: https://davidwalsh.name/automatic-image-tagging-cloudinary
[format_png]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGF2aWQtd2FzaC1ibG9nL3ZpZGVvL3VwbG9hZC9mbF93YXZlZm9ybSxoXzIwMCx3XzUwMC9MaWdodHNfcWg2dnZlLnBuZw?x-oss-process=image/format,png
[format_png 1]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGF2aWQtd2FzaC1ibG9nL3ZpZGVvL3VwbG9hZC9iX3JnYjphY2Q3ZTUsY29fcmdiOmZmZGE3ZixmbF93YXZlZm9ybSxoXzIwMCx3XzUwMC9MaWdodHNfcWg2dnZlLnBuZw?x-oss-process=image/format,png
[format_png 2]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGF2aWQtd2FzaC1ibG9nL3ZpZGVvL3VwbG9hZC9iX3JnYjphY2Q3ZTUsY29fcmdiOmZmZGE3Zixlb18yNDAsZmxfd2F2ZWZvcm0saF8yMDAsc29fMSx3XzUwMC9MaWdodHNfcWg2dnZlLnBuZw?x-oss-process=image/format,png
[https_davidwalsh.name_generate-waveform-images-audio-cloudinary]: https://davidwalsh.name/generate-waveform-images-audio-cloudinary