0

我正在使用polymer-3-starter-kit来自 cli 构建一个 polymer3 应用程序。它根据选定的播放列表从公共 api 中获取歌曲。

遇到以下问题：

  1. 第一首歌被禁用

  2. 音频似乎被缓存并且在路由更改时不会更改。

    例如：最初（或在页面刷新时），播放列表 1 被加载。当我单击 playlist2 并播放歌曲 2 时，实际上正在播放 playlist1-song2。在检查“检查元素”时，存在正确的 URL（播放列表 2-歌曲 2）。

音乐应用

我的歌曲.js 

class MySong extends PolymerElement {
  static get template() {
    return html`
      <!-- use iron-ajax to make api-calls with the selected playlist.id
           and get the list of songs -->
      <iron-ajax
                  auto
                  url=""
                  handle-as = "json"
                  on-response="handleResponse"
                  last-response="{{ajaxResponse}}">
      </iron-ajax>

      <div class="container">
      <template is="dom-repeat" items="[[allTracks]]">
        <div class="bg" style="background-image:url('[[item.imageUrl]]')">
         <div class="album"> [[item.name]] </div>
          <audio controls class="audio">
            <source src="[[item.albumURL]]" type="audio/mpeg">
          </audio>
        </div> 
      </template>
      </div>
    `;
  }
  static get properties() {
    return {
      prop1: {
        type: String,
        value: 'my-songs',
      },
      allTracks: {
        type: Array,
        value: [{}],
      }
    };
  }

  handleResponse(event, request) { 
    let tracks = request.response.tracks;
    this.allTracks = [];
    for(let track of tracks){
      let name = track.name;
      let artist = track.artistName;
      let albumURL = track.previewURL;
      let imageUrl = ``;
      this.allTracks.push({name, artist, albumURL, imageUrl});
    }
  }
}

我的应用程序.js

class MyApp extends PolymerElement {
  static get template() {
    return html `

      <app-location route="{{route}}" url-space-regex="^[[rootPath]]">
      </app-location>

      <app-route route="{{route}}" pattern="[[rootPath]]:page" data="{{routeData}}" tail="{{subroute}}">
      </app-route>

      <app-drawer-layout fullbleed="" narrow="{{narrow}}">
        <!-- Drawer content -->
        <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
          <app-toolbar>Menu</app-toolbar>
          <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
            <template is="dom-repeat" items="[[playlists]]">
              <a name="[[item.name]]" href="[[rootPath]][[item.name ]]">[[item.name]]</a>
            </template>
          </iron-selector>
        </app-drawer>

        <!-- Main content -->
        <app-header-layout has-scrolling-region="">
        <app-header slot="header" condenses="" reveals="" effects="waterfall">
            <app-toolbar>
            <paper-icon-button icon="my-icons:menu" drawer-toggle=""></paper-icon-button>
            <div main-title="">My Music App</div>
            </app-toolbar>
        </app-header>

        <iron-pages selected="[[page]]" attr-for-selected="name" role="main">
            <my-view404 name="view404"></my-view404>
            <my-song name="playlist" prop1="[[selectedPlaylist]]"></my-song>
        </iron-pages>
        </app-header-layout>
    `;
  }

提前致谢。

4

0 回答 0