amp-audio click on button change source

Question

I have a page with a AMP-LIST which receives a plain json file that includes url-links to some mp3 files. Something like this:

{"Items":
    [
        {"mp3":"https://my.url.com/mymp31.mp3" , "name" : "file1"},
        {"mp3":"https://my.url.com/mymp31.mp3" , "name" : "file1"},
        {"mp3":"https://my.url.com/mymp31.mp3" , "name" : "file1"},
        {"mp3":"https://my.url.com/mymp31.mp3" , "name" : "file1"},
        {"mp3":"https://my.url.com/mymp31.mp3" , "name" : "file1"}
    ]
}

And I have rendered this list into some plain tags. Also I have a AMP-AUDIO which its source should be changed according to items.

My Html will be something like this at the end:

<amp-audio 
   width="auto"
   height="50">
   <source type="audio/mpeg" src="https://....mp3"
    [src]="audiosrc">
</amp-audio>

<amp-list
   items="Items"
   height="315px"
   layout="fixed-height"
   src="JSONFILE"
   id="podcastlist">
   <template type="amp-mustache">
      <div class="box" on="tap:AMP.setState({ audiosrc : '{{mp3}}' })">
         {{name}}
      </div>
   </template>
</amp-list>

Now here's the problem : when I tap on divs, the source on audio file seems to change, but the actual new file is not rendered again. Any ideas??