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 - 它只是逗号分隔数字的列表）：

数据磁道-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路由，请确保您的属性包含方括号：

数据磁道-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将是一个Numbers数组 - 可能是其余代码所期望的

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

2 个答案: