Question

我正在尝试使用BBC的peaks.js在聚合物中显示音频波形。 This代码运行完美。基于要点，我创建了一个简单的聚合物网络组件，它应该显示音频波形。

    <!doctype HTML>
    <link rel="import" href="../bower_components/iron-overlay-behavior/iron-overlay-behavior.html">
    <link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
    <script type="text/javascript" src="peaks.js"></script>
<dom-module id="overlay-dialog">
    <template>
        <style is="custom-style">
            :host {
                background: white;
                color: black;
                padding: 24px;
                border: 2px solid;
                border-color: #3386ce;
                width:1100px;
                height:450px;
                box-shadow: rgba(0, 0, 0, 0.24) -2px 5px 12px 0px, rgba(0, 0, 0, 0.12) 0px 0px 12px 0px;
            }
        </style>
        <slot></slot>
    </template>
</dom-overlay>
<dom-module id="audiowaveform-dialog">
    <template>
        <style>
             .scrollable {
                 border: 1px solid lightgray;
                 padding: 24px;
                 @apply --layout-scroll;
             }
             #container {
                 margin: 24px auto;
                 width: 1000px;
             }
             .zoom-container {
                 box-shadow: 3px 3px 20px #919191;
                 margin: 0 0 24px 0;
                 -moz-box-shadow: 3px 3px 20px #919191;
                 -webkit-box-shadow: 3px 3px 20px #919191;
                 line-height: 0;
             }
            .overview-container {
                height: 85px;
            }
        </style>
        <overlay-dialog id="dialog" tabindex="-1" no-cancel-on-esc-key
            no-cancel-on-outside-click always-on-top
            on-iron-overlay-closed="closePerformed"
            <h2>Dialog Title</h2>
            <div id="container" class="scrollable">
                <div class="waveform">
                    <div class="zoom-container" hidden="">
                        <div class="konvajs-content" role="presentation" 
                            style="position: relative; width: 1000px; height: 200px;">
                            <canvas width="1000" height="200" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 200px;">
                            </canvas>
                            <canvas width="1000" height="200" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 200px;">
                            </canvas>
                            <canvas width="1000" height="200" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 200px;">
                            </canvas>
                            <canvas width="1000" height="200" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 200px;">
                            </canvas>
                            <canvas width="1000" height="200" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 200px;">
                            </canvas>
                        </div>
                    </div>
                    <div class="overview-container" hidden="">
                        <div class="konvajs-content" role="presentation" style="position: relative; width: 1000px; height: 85px;">
                            <canvas width="1000" height="85" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 85px;">
                            </canvas>
                            <canvas width="1000" height="85" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 85px;">
                            </canvas>
                            <canvas width="1000" height="85" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 85px;">
                            </canvas>
                            <canvas width="1000" height="85" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 85px;">
                            </canvas>
                            <canvas width="1000" height="85" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 85px;">
                            </canvas>
                            <canvas width="1000" height="85" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1000px; height: 85px;">
                            </canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div id="audio-controls">
                <audio controls="controls" id='audiowaveform'>
                    <source src="sample_21.wav" type="audio/mpeg">
                    Your browser does not support the audio element.
                </audio>
                <button data-action="zoom-in">Zoom in</button>
                <button data-action="zoom-out">Zoom out</button>
                <button data-action="add-segment">Add a Segment at current time</button>
                <button data-action="add-point">Add a Point at current time</button>
                <button data-action="log-data">Log segments/points</button>
                <button data-action="loop">Loop</button>
            </div>
            <!--p> Hello World</p>
            <p class="scrollable">
            </p-->
            <vaadin-button on-click="closeDialog">Close</vaadin-button>
        </overlay-dialog>
    </template>
    <script>
        Polymer({
            is: 'overlay-dialog',
            behaviors: [Polymer.IronOverlayBehavior]
        });
        Polymer({
            is: 'audiowaveform-dialog',
            properties: {
                isOpened: {
                    type: Boolean,
                    value: false
                },
                mediaType: {
                    type: String,
                    value: 'audio/mp3'
                },
                mediaSrc: {
                    type: String,
                },
                options: {
                    type: Object,
                    value: {
                        container: null,
                        mediaElement: null,
                        dataUri: {
                            arraybuffer: 'sample_21.dat'
                        },
                        zoomLevels : [8],
                        flags: {
                            segFlag : true,
                            segCallback : function(cb) {
                                /*var times = cb();
                                times.x = 'hello';
                                console.log(times);
                                modal.show();*/
                            },
                            loopFlag : false,
                            loopCallback :function(cb) {
                                var times = cb();
                                console.log(times);
                                audio.addEventListener('timeupdate', function(){});
                            }
                        },
                        keyboard: false
                    }
                }
            },
            observers: [
                '_mediaChanged(mediaSrc)'
            ],
            ready: function() {
                this.options.container = Polymer.dom(this.root).querySelector('#container');
                this.options.mediaElement = Polymer.dom(this.root).querySelector('audio');
            },
            /*attached: function() {
                this.async(function() {
                    console.log("clientWidth :" + this.$.container.clientWidth);
                }, 5000);
            },*/
            showAudioDialog: function() {
                console.log("showAudioDialog");
                if(!this.isOpened) {
                    this.$.dialog.opened = true;
                    this.isOpened = true;
                } else
                    console.log("Dialog already opened");
            },
            closeDialog: function() {
                this.$.dialog.opened = false;
                this.isOpened = false;
            },
            closePerformed: function(e) {
                console.log("closePerformed");
                console.log(e);
                console.log(this.mediaSrc);
            },
            _mediaChanged: function(mediaSrc) {
                console.log("_mediaChanged");
                /*this.options.container = Polymer.dom(this.$.container);
                this.options.mediaElement = Polymer.dom(this.root).querySelector('audio');*/
                console.log(this.options);

                var peaksInstance = peaks.init(this.options);

            }
        });
    </script>
</dom-module>

运行代码时，peaks.js会抛出错误：

未捕获的TypeError：[Peaks.init]请确保容器有宽度。

在进一步调查中，我发现了＆＃34;这个。$。options.container.clientwidth＆＃34;是0（如图中所示）

在原始示例代码中，它是1000.有人可以指出我在哪里做错了方法。我是这种聚合物的新手，非常感谢任何帮助。谢谢。

Answer 1

在#container被打开之前，clientWidth将不会设置任何overlay-dialog（即使它已明确调整大小）。

看起来您需要确保在此之前推迟peaks.init()。

我不熟悉peaks.js以及它如何执行初始化，但您可以尝试在对话框上侦听iron-overlay-opened事件并在src上设置#audiowaveform属性} source元素。

聚合物中的客户端宽度显示为零

1 个答案: