Vue radio

Developer
Dima
Size
5,915 Kb
Views
2,024
  1. Vue radio Previews
  2. Vue radio HTML Codes
  3. Vue radio CSS Codes
  4. Vue radio JS Codes

How do I make an vue radio?

What is a vue radio? How do you make a vue radio? This script and codes were developed by Dima on 28 January 2023, Saturday.

Vue radio Previews
IQ Test

Vue radio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vue radio</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app"> <center> <h1>Responsive [Steps]</h1> </center> <div class="Steps"> <div class="step"> <h2>first</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi maiores, rerum odio qui iusto ullam, expedita repellendus incidunt. Cum, animi voluptates facilis accusantium harum consectetur quis beatae est expedita obcaecati.</p> </div> <div class="step"> <h2>second</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi maiores, rerum odio qui iusto ullam, expedita repellendus incidunt. Cum, animi voluptates facilis accusantium harum consectetur quis beatae est expedita obcaecati.</p> </div> <div class="step"> <h2>third</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi maiores, rerum odio qui iusto ullam, expedita repellendus incidunt. Cum, animi voluptates facilis accusantium harum consectetur quis beatae est expedita obcaecati.</p> </div> <div class="step"> <h2>fourth</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi maiores, rerum odio qui iusto ullam, expedita repellendus incidunt. Cum, animi voluptates facilis accusantium harum consectetur quis beatae est expedita obcaecati.</p> </div> </div> <center> <div class="btn" @click="show_rModal = true; play(stations[0].src, 0)">Radio</div> </center> <audio ref="audio" src=""></audio> <r-modal :show.sync="show_rModal"> <center> <div id="audioControl" @click="stop()" :class="isPause ? 'pause' : ''"></div> </center> <div class="Card"> <div class="item" v-for="(item, index) in stations" :class="{ active : index == activeStation }" @click="play(item.src, index)">{{item.title}}</div> </div> </r-modal>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Vue radio - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Comfortaa:300,400&subset=latin,cyrillic");
body { font-family: sans-serif; color: #444;
}
@media (min-width: 640px) { .Steps { display: flex; }
}
.Steps { max-width: 960px; margin: auto; counter-reset: num;
}
.Steps h2 { font-family: 'Comfortaa';
}
.Steps p { font-family: 'Roboto Condensed'; line-height: 1.3;
}
.Steps div { counter-increment: num; position: relative; text-align: center; padding: 0.1em 2em; color: #fff;
}
.Steps div:after,
.Steps div:before { position: absolute;
}
.Steps div:before { content: counter(num); bottom: 0; left: 0; color: rgba(255,255,255,0.1); font-size: 6em; line-height: 1em; font-family: 'Roboto Condensed';
}
.Steps div:nth-child(1) { background: #117ec3;
}
.Steps div:nth-child(1):after { border-color: #117ec3 transparent transparent transparent;
}
@media (min-width: 640px) { .Steps div:nth-child(1):after { border-color: transparent transparent transparent #117ec3; }
}
.Steps div:nth-child(2) { background: #1491e1;
}
.Steps div:nth-child(2):after { border-color: #1491e1 transparent transparent transparent;
}
@media (min-width: 640px) { .Steps div:nth-child(2):after { border-color: transparent transparent transparent #1491e1; }
}
.Steps div:nth-child(3) { background: #2ba1eb;
}
.Steps div:nth-child(3):after { border-color: #2ba1eb transparent transparent transparent;
}
@media (min-width: 640px) { .Steps div:nth-child(3):after { border-color: transparent transparent transparent #2ba1eb; }
}
.Steps div:nth-child(4) { background: #49afef;
}
.Steps div:nth-child(4):after { border-color: #49afef transparent transparent transparent;
}
@media (min-width: 640px) { .Steps div:nth-child(4):after { border-color: transparent transparent transparent #49afef; }
}
.Steps div:hover { background: #0b6ca9;
}
.Steps div:hover:after { border-color: #0b6ca9 transparent transparent transparent;
}
.Steps div:after { z-index: 1; content: ''; bottom: -25px; right: 2em; border-style: solid; border-width: 25px 25px 0 25px;
}
.Steps div:nth-child(4):after { content: none;
}
@media (min-width: 640px) { .Steps div:after { bottom: 50%; right: -20px; margin-bottom: -30px; border-width: 30px 0 30px 22px; } .Steps div:hover:after { border-color: transparent transparent transparent #0b6ca9; }
}
.Modal_Overlay { z-index: 100; position: fixed; left: 0; top: 0; display: flex; justify-content: flex-end; width: 100%; height: 100%; cursor: pointer; background: rgba(68,68,68,0.7); overflow: overlay;
}
.Modal_Card { cursor: auto; background: #fff; overflow: overlay; animation: rModal 0.2s 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; transform: translateX(100%); padding: 1em; max-width: 400px;
}
.btn { margin-top: 3em; display: inline-block; cursor: pointer; font-size: 18px; padding: 0.8em 1.4em; border-radius: 3em; background: #7986cb; border: 2px solid #7986cb; transition: background-color 0.3s, color 0.3s;
}
.btn:hover { background-color: #fff; color: #3f51b5;
}
.Card { box-shadow: 0 0.2em 1.4em 0 rgba(0,0,0,0.2); margin: 1em;
}
.Card .item { padding: 0.7em 1em; border-top: 1px solid #efefef; cursor: pointer;
}
.Card .item.active { background: #f9f9f9;
}
#audioControl { box-sizing: border-box; width: 5em; height: 5em; border-radius: 50%; cursor: pointer; background: #ffa07a url("data:image/svg+xml;utf8,") no-repeat center/50%;
}
#audioControl:hover { border: 6px solid rgba(0,0,0,0.2);
}
#audioControl.pause { background: #bed4e3 url("data:image/svg+xml;utf8,") no-repeat center/50%;
}
@-moz-keyframes rModal { to { transform: translateX(0); }
}
@-webkit-keyframes rModal { to { transform: translateX(0); }
}
@-o-keyframes rModal { to { transform: translateX(0); }
}
@keyframes rModal { to { transform: translateX(0); }
}

Vue radio - Script Codes JS Codes

const stations = [ { title: "На Волне Yum.fm", src: "http://yumfm.hostingradio.ru:8020/yumfm128.mp3" },{ title: "Радио Best FM", src: "http://best128.streamr.ru/" },{ title: "Радио ENERGY", src: "http://ic2.101.ru:8000/v1_1" },{ title: "Rock FM 95.2", src: "http://nashe.streamr.ru/rock-128.mp3" },{ title: "Радио ПАССАЖ", src: "http://listen.radiopassazh.ru/hd" },{ title: "Радио Maximum", src: "http://icecast.radiomaximum.cdnvideo.ru/maximum.mp3" },{ title: "Авторадио", src: "http://den.101.ru:4000/ar_78_01" },{ title: "Зайцев FM", src: "http://radio.zaycev.fm:9002/ZaycevFM(128)" }
];
const rModal = { name: "rModal", template: ` <div class="Modal_Overlay" v-show="show" @click.self="close"> <div class="Modal_Card"> <div class="close" @click="close"></div> <slot></slot> </div> </div> `, props: ["show"], methods: { close() { this.$emit('update:show', false) } }
};
const vm = new Vue({ el: "#app", components: { rModal }, data: { show_rModal: false, stations: stations, activeStation: 0, isPause: false }, methods: { play(src, i) { this.$refs.audio.src = src; this.activeStation = i; this.go(); }, stop() { if (!this.isPause) { this.isPause = true; this.$refs.audio.pause(); } else { this.go() } }, go() { this.isPause = false; this.$refs.audio.play(); } },
});
Vue radio - Script Codes
Vue radio - Script Codes
Home Page Home
Developer Dima
Username dimaZubkov
Uploaded January 28, 2023
Rating 4.5
Size 5,915 Kb
Views 2,024
Do you need developer help for Vue radio?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dima (dimaZubkov) Script Codes
Name
Glitch
Glitch
Scroll animating effect
Star Rating
Web Audio API
Audio button
Burger nav
Mega menu
Responsive typography harmony
Section Slides
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!