如何在 PHP 中使用解码后的 JSON 数据？

Question

使用 this 插件，我需要使用预渲染数据绘制音频波形。

我将 JSON 数据存储在 MySQL 中作为 {"sample_rate":44100,"samples_per_pixel":4410,"bits":8,"length":2668,"data":[0.13,0.19,0.15,0.11,0.13,0.13,0.24,0.35 ...]}

所以我尝试了：

PHP

$json = $row['wave'];
$json_array = json_decode($json);
$json_wave = implode(',', $json_array->data);

HTML

<div data-track-wave="'.$json_wave.'" id="play'.$row['id'].'" class="track"></div>

JS

function createWaveform(json) {
    $( "#waveformbottom" ).empty();
    var linGrad = document.createElement('canvas').getContext('2d').createLinearGradient(0,0,0,170);
    linGrad.addColorStop(0, '#ff3b25'); 
    linGrad.addColorStop(0.5, '#ff0018'); 

    var wavesurferbottom = WaveSurfer.create({
        container: document.querySelector('#waveformbottom'),
        waveColor: '#b3b3b3',
        progressColor: linGrad,
        backend: 'MediaElement',
        mediaType:'audio',
        height:'48',
        cursorColor:'#fff',
        cursorWidth:'0',
        normalize:true,
        barWidth:'2'
    });

    //Set peaks ! THE PROBLEM !
    wavesurferbottom.backend.peaks = [json];
    //Draw peaks
    wavesurferbottom.drawBuffer();

    $(window).resize(function(){
       if($(this).width() != width){
            widthbottom = $(this).width();
            wavesurferbottom.drawer.containerWidth = wavesurferbottom.drawer.container.clientWidth;
            wavesurferbottom.drawBuffer();  
       }
    });
}

$(document).on('click touchend', '.track', function(e) {
    var wave_data = $(this).data('track-wave');

    createWaveform(json);
    e.preventDefault();
});

我的 wave_data 的调试表明它和 0.01,0.13,0.19,0.15,0.11,... 一样正确，但是没有绘制波形。

相反，如果我设置 wavesurferbottom.backend.peaks = [0.01,0.13,0.19,0.15,0.11,...];它会起作用。

我不是 JSON 专家，我做错了什么？

Answer 1

不同之处在于，一个是字符串（无论如何都无效 JSON - 它只是一个逗号分隔的数字列表）：

data-track-json="0.01,0.13,0.19,0.15,0.11"

var json = $(this).data('track-json'); // a string

还有一个是JS数组：

var x=[0.01,0.13,0.19,0.15,0.11];

一种简单的方法是将其拆分为 , - 这会将您的字符串转换为您需要的 JS 数组，如下所示：

var samples = $(this).data('track-json').split(','); // Renamed because it's not JSON
..
createWaveform(samples);

还值得注意的是，您将获得一个 字符串数组 而不是一个数字数组，但是许多 JS 库都可以处理它。如果您想走 JSON 路线，请确保您的属性包含方括号：

data-track-json="[0.01,0.13,0.19,0.15,0.11]"

要创建的 PHP 可能如下所示：

$json_wave = '['.implode(',', $json_array->data).']';

然后使用 JSON.parse 调用将其转换为合适的数字类型数组：

var samples = JSON.parse( $(this).data('track-json') );

Answer 2

如果您还想使用JSON

PHP

$json = $row['wave'];
$object = json_decode($json);
$json_wave = json_encode($object->data);

这是一个 JSON 字符串，大概类似于 [1,2,3,4]

HTML不变

<div data-track-name="'.$row['name'].'" data-track-id="'.$row['id'].'" data-track-json="'.$json_wave.'" id="play'.$row['id'].'" class="track song-play-btn playthistrack"></div>

JS 解析 JSON 您发现问题的地方

//Set peaks ! THE PROBLEM !
wavesurferbottom.backend.peaks = JSON.parse(json);

wavesurferbottom.backend.peaks 将是一个数字数组——大概是其余代码所期望的

如何在 PHP 中使用解码后的 JSON 数据？

How can I use decoded JSON data inside PHP?

javascript

json

wavesurfer.js