-2

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

我将 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 专家，我做错了什么？

4

2 回答 2

5

不同之处在于它是一个字符串（无论如何它都不是有效的 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') );
于 2016-12-13T12:56:03.943 回答
1

如果您仍想使用 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将是一个数字数组 - 大概是其余代码所期望的

于 2016-12-13T13:04:56.460 回答