html - 替换网站移动版本中的图标

Question

我有一个音轨 block ，我想用一个播放/停止图标替换所有音轨。我该怎么做？

.lesson-item {
    max-width: 100%;
    transition: transform 300ms linear 0ms, box-shadow 300ms linear 0ms, z-index 300ms linear 0ms;
    cursor: pointer;
    transform-origin: left top;
}

.lesson-item:after {
    content: '';
    clear: both;
    display: block;
}
    
.img {
    background-size: cover;
    float: left;
    margin-right: 1rem;
    width: 100px;
    height: 100px;
    transition: height 300ms, width 300ms;
    transform-origin: left top;
}

<div class="lesson-item">
    <div class="img" style="background-image: url(https://dummyimage.com/100x100/000/fff)"></div>
    <div class="description">
        <div class="player">
            <audio preload="auto" controls>
                <source src="assets/audio.mp3" />
                <source src="assets/audio.ogg" />
                <source src="assets/audio.wav" />
            </audio>
        </div>
    </div>
    <div class="bottom">
        <a href="#">Text</a>
        <a href="#">Text</a>
        <a href="#">Text</a>
    </div>
</div>

我只需要一个图标播放/停止而不是所有轨道。

Answer 1

工作示例:https://jsfiddle.net/laberg/jhugx58y/22/

function togglePlay(video) {

  var audio = document.getElementsByTagName("audio")[0];
  
  if (audio) {
  
    if (audio.paused) {
    	audio.play();
        document.getElementById("button").src = "https://image.flaticon.com/icons/svg/149/149658.svg";
    } else {
    	audio.pause();
        document.getElementById("button").src = "https://image.flaticon.com/icons/svg/149/149657.svg";
    }
  
  }
}

.lesson-item {
    max-width: 100%;
    transition: transform 300ms linear 0ms, box-shadow 300ms linear 0ms, z-index 300ms linear 0ms;
    cursor: pointer;
    transform-origin: left top;
}

.lesson-item:after {
    content: '';
    clear: both;
    display: block;
}
    
.img {
    background-size: cover;
    float: left;
    margin-right: 1rem;
    width: 100px;
    height: 100px;
    transition: height 300ms, width 300ms;
    transform-origin: left top;
}
#button {
  width:20px;
}

<div class="lesson-item">
    <div class="img" style="background-image: url(https://dummyimage.com/100x100/000/fff)"></div>
    <div class="description">
        <div class="player">
            <img src="https://image.flaticon.com/icons/svg/149/149657.svg" onclick="togglePlay(this)" id="button">
            <audio preload="auto">
                <source src="https://ccrma.stanford.edu/~jos/mp3/bachfugue.mp3" />
                <source src="assets/audio.ogg" />
                <source src="assets/audio.wav" />
            </audio>
        </div>
    </div>
    <div class="bottom">
        <a href="#">Text</a>
        <a href="#">Text</a>
        <a href="#">Text</a>
    </div>
</div>