I am in the process of developing a karaoke-style website where I aim to incorporate HTML elements along with text. My intention is to introduce a break tag that will display certain lyrics on a separate page.
You can access the codepen for this project here: https://codepen.io/scottYg55/pen/OJPRyXy
Although I have attempted to insert a break tag, it seems like the output is not rendering as HTML. I am aware of this issue, but I am seeking advice on how I can resolve it.
If anyone has any suggestions or solutions to offer, please feel free to share them.
var lyricsText = [
{
"text": "Intro <br>Ding Dong Merrily on High",
"duration": 3900
}];
var player = new Vue({
el: '#player',
data: {
// Data properties here
},
ready: function() {
// Setup functionality here
},
methods: {
// Define methods for functionality
}
});
// Timer function
function Timer(callback, delay) {
// Function logic here
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.0-rc.2/vue.js"></script>
<div class="Player" id="player">
<audio src="dd.mp3"
v-el:audio></audio>
<div class="Player__cover" @click="hideText">
// Player cover content
</div>
<div class="Player__track"
:style="{ width: song.progress + '%' }"></div>
<div class="Player__controls">
// Player controls content
</div>
</div>