It appears that you have already added a button click event.
You can simply trigger that click event to change the icons.
Here is how your code will look:
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function() {
this.classList.toggle('is-playing')
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function() {
player.volume = 1.0;
player.src = value.value;
button.click();
});
}());
Note: button.click();
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function() {
this.classList.toggle('is-playing')
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function() {
player.volume = 1.0;
player.src = value.value;
button.click();
});
}());
body {
background-color: black;
}
.btn {
position: relative;
width: 200px;
height: 200px;
cursor: pointer;
}
.btn .play,
.btn .pause {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.play {
fill: #000000;
border: 3px solid blue;
border-radius: 50%;
}
.play path {
fill: blue;
}
.pause {
fill: #000000;
border: 3px solid blue;
border-radius: 50%;
}
.pause path {
fill: blue;
}
.pause {
display: none;
}
.is-playing .play {
display: none;
}
.is-playing .pause {
display: block;
}
.label {
font-size: 22px;
color: blue;
font-family: Tahoma;
}
.info {
display: table-cell;
white-space: nowrap;
}
.input {
font-size: 22px;
width: 200px;
margin-top: 40px;
background: black;
color: blue;
}
.sent {
font-size: 22px;
background: black;
color: blue;
cursor: pointer;
font-family: Tahoma;
}
<audio autoplay id="player"></audio>
<div id="button" class="btn">
<svg class="play hide" width="200" height="200" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12"> </circle>
<path d="M9.846 16.86c-.467.303-.846.097-.846-.45V7.588c0-.551.38-.752.846-.45l6.91 4.48c.324.21.327.549 0 .761l-6.91 4.48z">
</path></svg>
<svg class="pause" width="200" height="200" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12"> </circle>
<path d="M8 7.596c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596H8.607A.602.602 0 0 1 8 16.404V7.596zm5 0c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596h-1.786a.602.602 0 0 1-.607-.596V7.596z">
</path></svg>
</div>
<div class="info">
<label class="label" for="input">Text</label>
<input class="input" id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
<input class="sent" id="sent" type="submit" value="Set" />
</div>