polymer - Polymer3.x オーディオがキャッシュされます

Question

polymer-3-starter-kitfrom cliを使用して Polymer3 アプリを構築しています。選択したプレイリストに基づいて、パブリック API から曲を取得します。

次の問題を取得します。

1. 最初の曲は無効です

2. オーディオはキャッシュされているようで、ルートの変更時に変更されません。

   例: 最初に (またはページの更新時に)、プレイリスト 1 が読み込まれます。プレイリスト2をクリックしてsong2を再生すると、プレイリスト1-song2が実際に再生されています。「要素の検査」をチェックすると、正しい URL が存在します (playlist2-song2)。

my-song.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});
    }
  }
}

my-app.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>
    `;
  }

前もって感謝します。