Как я могу написать мультимедийную ссылку и изображение в формате mp3, используя литералы шаблонов? - PullRequest
Новая
       13

Как я могу написать мультимедийную ссылку и изображение в формате mp3, используя литералы шаблонов?

0 голосов
/ 15 января 2020

Как я могу связать эти mp3s и utilsound.png с песнями, а затем щелкнуть песню, чтобы воспроизвести ее с помощью литералов шаблона? Я также не могу понять, как удалить пули? Я не могу понять, как добавить это в литералы шаблона. Я получаю строку текста вместо ссылок и получаю маркированный список, когда его нет; это промежуток .????

// JavaScript Document

var albumData =[
	{	
		"imageUrl": "music_imgs/covers/genpx1.png",
		"artist": "Gen1artist",
		"name": "Gen1name",
		"release":"released 2017",
		"tracks":[
		{
			"TrackNumber": "1.",
			"link":"media/file_example_MP3_700KB.mp3",
			"song":" Gen1Track1",
			"songimgUrl": "music_imgs/availsound.png",
			"duration":"2:47"
		},
		{
			"TrackNumber": "2.",
			"song":" Gen1Track2",
			"duration":"0:00"
		},
		{
			"TrackNumber": "3.",
			"link":"media/file_example_MP3_700KB.mp3",
			"song":" Gen1Track3",
			"songimgUrl": "music_imgs/availsound.png",
			"duration":"2:52"
		},
		{
			"TrackNumber": "4.",
			"link":"media/file_example_MP3_700KB.mp3",
			"song":" Gen1Track4",
			"songimgUrl": "music_imgs/availsound.png",
			"duration":"3:25"
		}
		]
	}
]

var albtunes = $(`${albumData.map(function(tlist) {
	  return tlist.tracks.map(r=>`
		  	<li class="tracks">
				<span class="songs">${r.TrackNumber + r.song + r.link + r.songimgUrl}</span>
				<span class="time">${r.duration}</span>
			</li>
      `).join('');
      }).join('')
}`);
var playlist=$('#playlist');
$( playlist ).append ( albtunes );
@charset "UTF-8";
/* CSS Document */
*{
	box-sizing: border-box;
}
body{
	text-align:center;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.8rem;
	font-weight:bold;
	color:#ffffff;
	background-color:#000000;
}
container{
	margin: 0 auto;
	position: relative;
  	padding-top: 5px;
	width:85%;
	height:auto;
	display:block;
}
#music{
	position: relative;
}
#playlist{
	float:right;
	width:60%;
	padding:10px;
  	background-color:#373636;
}
.tracks{
 }
.songs{
	float:left;
}
.time{
	float:right;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>playlist_1-15_stackqu</title>
<link href="mus_css/playlist_1-15_stackqu.css" rel="stylesheet" type="text/css">
</head>

<body>
	<container>
		<div id="music">
			<div id="playlist">
        <!---<li class="tracks">
				<span class="songs"></span>
				<span class="time"></span>
			</li>--->
			</div>
		</div>
	</container>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script src="mus_js/playlist_1-15_stackqu.js"></script>
    </body>
</html>

1 Ответ

0 голосов
/ 16 января 2020

В l oop вместо создания li или span создайте тег a с атрибутом href. Значение href должно быть аудиофайлом. В вашем l oop сделайте что-то вроде следующего: 

tracks
  .filter(track => track.hasOwnProperty('link')) // Get only the tracks with a link
  .map(track => 
    `<a class="track" href="${track.link}">
      <span class="title">${track.TrackNumber}: ${track.song}</span>
      <span class="duration">${track.duration}</span>
    </a>`)
  .join('');

Метод filter возвращает новые дорожки массива, которые имеют свойство link. map установит для свойства link атрибут href в вашем HTML. Это позволит пользователю щелкнуть ссылку и перенаправиться к файлу, который в некоторых браузерах открывает новую вкладку и автоматически начинает воспроизведение.

...