Just because my code is too hard to work with, it doesn’t mean it can’t be done. I’ll just need to find someone who can help me with it then.
Any takers?
@PaulOB
@ronpat
@SamA74
or someone else?
There’s gotta be someone who can do this.
Would I be on the right track if I said the svg needs to be set up something like this?
'width', '100');
'height', '100');
'style', 'fill:#E77D19')
'viewBox', '0 0 60 100')
'path fill', 'currentColor')
'd', 'M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z')';
No, I don’t see how that would work.
@m3g4p0p has a working solution for you.
My feelings on this matter are that you need to sleep in the bed that you’ve made for yourself.
We can happily help you to tidy things up, but making things worse goes against every instinct.
SVG using DOM, isn’t that what I need to implement?
or something in that realm?
And my feelings are, I want to get it to work using the code I set up. I understand there’s a better way, but I want to get it to work using my code, even if it’s not the most efficient way to do it.
It’s not just about being efficient. It’s so that you and others are able to more easily modify the code. With the mess that you currently have it’s like Sisyphus pushing the boulder eternally uphill. It brings pain to everybody that tries to work with your code.
Would something like this work?
playButton2.innerHTML = '<svg></svg>';
Latest Iteration: Not Working Though
What am I doing wrong?
<svg width=\"100\" height=\"100\" style=\"color:#E77D19;\" viewBox=\"0 0 60 100\"><path fill=\"currentColor\" d=\"M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z\"></svg>
<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: transparent; background-repeat: no-repeat; border: 3px solid #E77D19; border-radius:0px;font-family:Tahoma; font-weight: bold;font-size:30px; color:#E77D19;" onclick="
var button = document.getElementById('playButton');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
playButton2.innerHTML = '<svg width=\"100\" height=\"100\" style=\"color:#E77D19;\" viewBox=\"0 0 60 100\"><path fill=\"currentColor\" d=\"M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z\"></svg>';
player.play();
playButton2.style.border='none'
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
} else {
playButton2.innerHTML = 'Play';
player.pause();
playButton2.style.border='none'
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
}">
<svg width="100" height="100" style="color:#E77D19;" viewBox="0 0 85 100"><path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"><title>PLAY</title></path></svg></button>
<audio id="player2" style="display:none;">
<source src='' type='audio/mpeg' />
</source></audio>
Is there anything you would modify or change?
How does it look to you?
<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: transparent; background-repeat: no-repeat; border: 3px solid #E77D19; border-radius:0px;font-family:Tahoma; font-weight: bold;font-size:30px; color:#E77D19;"
onclick="
var button = document.getElementById('playButton');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
playButton2.innerHTML = '<svg width=\'100\' height=\'100\' style=\'color:#E77D19;\' viewBox=\'0 0 60 100\'><path fill=\'currentColor\' d=\'M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z\'></svg>';
player.play();
playButton2.style.border='none'
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
} else {
playButton2.innerHTML = '<svg width=\'100\' height=\'100\' style=\'color:#E77D19;\' viewBox=\'0 0 60 100\'><path fill=\'currentColor\' d=\'M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z\'></svg>';
player.pause();
playButton2.style.border='none'
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
}">
<svg width="100" height="100" style="color:#E77D19;" viewBox="0 0 85 100">
<path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
</svg>
</button>
<audio id="player2" style="display:none;">
<source src='' type='audio/mpeg' />
</source>
</audio>
Here is the fiddle from @m3g4p0p with your code incorporated into it.
The HTML
<button class="play">
<svg class="play" viewBox="0 0 85 100">
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
<title>PLAY</title>
</path>
</svg>
<svg class="pause" viewBox="0 0 60 100">
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
<title>PAUSE</title>
</path>
</svg>
</button>
<audio class="player">
<source src="" type="audio/mpeg">
</audio>
The CSS
button.play {
/* Display & Box Model */
display: block;
border: 3px solid #E77D19;
border-radius: 0px;
width: 266px;
height: 266px;
/* Text */
font-family: Tahoma;
font-size: 30px;
font-weight: bold;
/* Color */
color: #E77D19;
background-color: transparent;
/* Other */
cursor: pointer;
background-repeat: no-repeat;
}
button.play.has-played {
border: none;
background-image: url("http://via.placeholder.com/266x266");
}
audio.player {
display: none;
}
svg {
width: 100px;
height: 100px;
color: #E77D19;
}
svg path {
fill: currentColor;
}
svg.pause {
display: none;
}
.is-playing svg.play {
display: none;
}
.is-playing svg.pause {
display: inline-block;
}
The JavaScript
function playAudio(player) {
player.volume = 1.0;
if (player.paused) {
player.play();
} else {
player.pause();
}
}
function playClickHandler(evt) {
var button = document.querySelector("button.play");
var player = document.querySelector("audio.player");
button.classList.add('has-played');
button.classList.toggle('is-playing');
playAudio(player);
}
var playButton = document.querySelector('button.play')
playButton.addEventListener('click', playClickHandler, false);
The fiddle for the above code is found at https://jsfiddle.net/zncjm6hp/3/
3 Likes
When you stop your player from playing, the play button is misaligned. Good luck with that.
What do you mean?
Last Updated: Still misaligned?
<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: transparent; background-repeat: no-repeat; border: 3px solid #E77D19; border-radius:0px;font-family:Tahoma; font-weight: bold;font-size:30px; color:#E77D19;"
onclick="
var button = document.getElementById('playButton');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
playButton2.innerHTML = '<svg width=\'100\' height=\'100\' style=\'color:#E77D19;\' viewBox=\'0 0 60 100\'><path fill=\'currentColor\' d=\'M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z\'></svg>';
player.play();
playButton2.style.border='none'
playButton2.style.boxShadow='inset 0 0 0 3px #E77D19'
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
} else {
playButton2.innerHTML = '<svg width=\'100\' height=\'100\' style=\'color:#E77D19;\' viewBox=\'0 0 85 100\'><path fill=\'currentColor\' d=\'M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z\'></svg>';
player.pause();
playButton2.style.border='none'
playButton2.style.boxShadow='inset 0 0 0 3px #E77D19'
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
}">
<svg width="100" height="100" style="color:#E77D19;" viewBox="0 0 85 100">
<path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
</svg>
</button>
<audio id="player2" style="display:none;">
<source src='' type='audio/mpeg' />
</source>
</audio>
Nope.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.