Wavesurfer.js не может распознать контейнер сигнала - PullRequest
Новая
       48

Wavesurfer.js не может распознать контейнер сигнала

0 голосов
/ 19 октября 2019

Я использую waveurfer с angular, я пытался поместить контейнер осциллограммы в блоки тегов html с * ngIf и * ngFor, когда я запускал проект, angular дал мне сообщение об ошибке, подобное этому: «Не могу найтиэлемент контейнера ". То, что я хочу сделать прямо сейчас, - это способ поместить контейнер формы волны в этот блок HTML-кодов, но все еще может воспроизводить звук. Дополнительная информация (Блоки HTML-кодов, которые я упомянул, являются элементами аудиоплеера, такими как обложки альбомов, название песни, имя исполнителя, которые отображаются * ngFor списка данных, получающего данные из службы GET).

Iпопытался переместить контейнер за пределы блоков кода, и все работает нормально, но я хочу, чтобы в ходе выполнения внутри этих блоков кода

Это контейнер waveurfer: 

<div id="waveform"></div>

Это блоки кода, которые я хочу окружить: 

<ng-container *ngIf="playlist">
<div id="waveform"></div>
<div class="coverAll" flexLayout="column">
    <div class="upperPart" flexLayout="row" style="background-image: url(https://images.genius.com/225d8b51efbfa327ed66d35898468855.1000x1000x1.jpg) blur">
        <div class="albumArt" fxFlex="30">
            <img src="https://static.tumblr.com/exbflx8/z13m20ek0/cover.png" alt="Smiley face" height="270px" width="100%">
        </div>
        <div class="space" fxFlex="2"></div>
        <div class="rightPart" fxFlex="70">
            <div class="songInfo">
                <h1>{{playlist.playlistName}}</h1>
                <ng-container *ngIf="currentSongName">
                    <h4>Now playing : {{currentSongName}}</h4>
                </ng-container>
            </div>
            <button (click)="play()">Play</button>
            <img *ngIf="waveform" src={{waveform}}>
            <div class="audioPlayer">
                <audio src="{{currentSongURL}}" controls style="width: 98%">
                </audio>
            </div>
        </div>
    </div>
    <div *ngFor="let song of playlist.songs" class="lowerPart">
        <a style="text-decoration:none">
            <div class="songChoosing" flexLayout=column style="border-bottom-style:inset;">    
                <div class="songMember" flexLayout="row">
                    <a (click)="changeSong(song)">
                        <div class="coverHolder" fxFlex="5">
                            <img src="{{song.songCoverArt}}" alt="Smiley face" height="28" width="35" class="miniCover">
                        </div>
                        <div class="miniSongNameHolder" fxFlex="75">
                            <p class="miniSongName">{{song.songName}}</p>
                        </div>
                    </a>
                </div>
            </div>
        </a>
    </div>
</div>
</ng-container>

Я новичок в англоязычном мире, надеюсь, вы, ребята, сможете помочь решить эту проблему! Ткс всем!

...