关于Pyodide的一些试用

amzing94988
312 阅读3分钟

什么是Pyodide?
关于这个问题在网上找到一段介绍。

Pyodide项目源于Mozilla的项目Iodide。Iodide是基于Web技术的数据科学实验和通信工具。它旨在在浏览器中进行数据计算。问题是通用的浏览器语言JS，没有成熟的数据科学处理库，也缺乏一些数值计算很有用功能和数据结构，比如运算符重载等。虽然完善JS语言本身是一条路，但是这条路太慢，所以有必要投机取巧的走一条捷径出来。这就是Pyodide项目的所做的事情：通过将成熟活跃的Python科学计算工具栈引入浏览器来满足数据科学计算的需要。Pyodide提供了一个完整的标准Python解释器，它完全在浏览器中运行，可以完全访问浏览器的Web API。

Pydodie项目技术架构的关键技术就是新兴的emscripten和WebAssembly。使用他们实现将C语言编写的现有代码库移植到浏览器运行。Pyodide使用Python化的emscripten类库cpython-emscripten为基础。

Emscripten和WebAssembly
关于emscripten互联网上有大量的介绍，在Pyodide项目中它的作用是： 实现从C/C++到WebAssembly的编译器。
实现兼容性层，使浏览器变为一个本机计算环境。 WebAssembly是一种在现代Web浏览器中运行的新语言，是对JS脚本的补充。它以接近本机的性能运行在浏览器上，旨在作为C和C++等低级语言的编译目标。

就是说咱们可以在浏览器中运行一些Python的程序了，但还不是完全体的Python。更详细的介绍大家可以去看一下这篇文章
pyodide官方文档大家看这里

pyodide的官方示例，看似简单，其实一点也不难

<!doctype html>
<html>
  <head>
      <script src="https://cdn.jsdelivr.net/pyodide/v0.26.1/full/pyodide.js"></script>
  </head>
  <body>
    Pyodide test page <br>
    Open your browser console to see Pyodide output
    <script type="text/javascript">
      async function main(){
        let pyodide = await loadPyodide();
        console.log(pyodide.runPython(`
            import sys
            sys.version
        `));
        pyodide.runPython("print(1 + 2)");
      }
      main();
    </script>
  </body>
</html>

看到这里你是不是已经学会了？
那么接下来我们用pyodide做点不一样的东西。
上代码！

async function main(){
        let pyodide = await loadPyodide();
          let response = await fetch('./example.wav');
          let arrayBuffer = await response.arrayBuffer();
          let uint8Array = new Uint8Array(arrayBuffer);
		pyodide.globals.set('audio_data', uint8Array);
		await pyodide.loadPackage("micropip");
		const micropip = pyodide.pyimport("micropip");
		await micropip.install('scipy');
		const pyscript = '
			from scipy.io import wavfile
			from io import BytesIO
			import sys
			import json
			audio_buffer = BytesIO(bytes(audio_data.to_py()))
			fs, audio_wave = wavfile.read(audio_buffer)
			result = {
				'fs': fs,
				'audio_wave': audio_wave.tolist(),
			}
			json_res = json.dumps(result)
			json_res
                        '
		const result = await pyodide.runPythonAsync(pyscript);
		console.log(JSON.parse(result));
      }

将main函数进行一些简单的改造,在这段代码中读取了一段音频，将音频从js层传到Py层，通过引入Scipy包的wavfile来处理音频，提取音频数据，得到fs(采样率)，audio_wave（这个数据我们暂且理解成音频的频率吧,有没有懂哥这个是不是代表频率？），pyodide默认将最后一行代码作为返回结果，所以最后返回的是json_res（一个json串）。通过图表工具处理后得到一个这样的图 image.png 对于立体声或多声道音频文件，audio_wave 是一个二维数组，其中每一行表示一个样本，每一列表示一个声道。 是不是还挺酷的，在浏览器端也可以进行复杂的数据处理了。

avatar
文章
阅读
粉丝