Как сделать скрипт для проигрывания конкретной мелодии?

Question

[partyzanx]

Есть вот такой див

<div class="pin">bi</div>
<div class="pin">ba</div>
<div class="pin">a</div>
<div class="pin">ao</div>
<div class="pin">o</div>

Необходим скрипт, при котором при нажатии на див, например, ba выполнялась следующая ява команда:

var mp3 = new Audio('http://russian.cri.cn/newru/chinese/lesson01/pinyin/ba.mp3');mp3.play();

То есть, подставлялось автоматически содержание дива, в данном случае ba.mp3
А если нажимается див ao , то подставлялось ao.mp3

Comments

[Ankhena]

В переменную получить innerHTML от нажатого div.
Эту переменную подставлять вместо имени файла.

Answer 1

[Stalker_RED]

Без jQuery

function play(evt) {
    let sound = evt.target.textContent // текст из дива
    player.src = `http://russian.cri.cn/newru/chinese/lesson01/pinyin/${sound}.mp3`
    player.play();
}

https://jsfiddle.net/8ka8tees/

Comments

[partyzanx]

Привет. А можно как-то модифицировать скрипт, чтобы он ещё подставлял содержимое title ?

Например

<div class="pin" title="1">bi</div> формировалась ссылка

https://d2mllj54g854r4.cloudfront.net/chinese_static/audio/alicia/ + bi + 1.mp3

а для <div class="pin" title="4">bi</div> формировалась ссылка

https://d2mllj54g854r4.cloudfront.net/chinese_static/audio/alicia/ + bi + 4.mp3

Спасибо большое!

PS
На выходе получатся вот такие звуки, можете послушать
1
2
3
4

[Stalker_RED]

partyzanx: Можно конечно.

let sound = evt.target.textContent // текст из дива
let title = evt.target.title // из title
player.src = `https://d2mllj54g854r4.cloudfront.net/chinese_static/audio/alicia/${sound}${title}.mp3`

Второй ваш вопрос я видел, но вы так непонятно его описали, что я решил не лезть, и видимо правильно сделал. 27 комментариев к ответу, а вы все еще не можете нормально описать чего хотите.

[partyzanx]

Спасибо! Скрипт сработал!

У меня такая проблема возникла, содержимое дивов в этот раз не просто буква "a",

а такие - "ā", "á","ǎ","à"

Соответственно, скрипт подставляет эти значения и чтения не происходит

Можно ли как-то научить скрипт воспринимать подобные символы за a ?
Например, .replace('ā','a') .replace('á','a') ....

[Stalker_RED]

partyzanx: Можно, но довольно сложно. Делайте отдельным вопросом.

Answer 2

[holymotion]

https://jsfiddle.net/fzbhp38z/8/

$('.pin').on('click', function() {
      let mp3 = new Audio(`http://russian.cri.cn/newru/chinese/lesson01/pinyin/${$(this).text().trim()}.mp3`);

      mp3.play();
   })

Comments

[partyzanx]

Привет. А можно как-то модифицировать скрипт, чтобы он ещё подставлял содержимое title ?

Например

<div class="pin" title="1">bi</div> формировалась ссылка

https://d2mllj54g854r4.cloudfront.net/chinese_static/audio/alicia/ + bi + 1.mp3

а для <div class="pin" title="4">bi</div> формировалась ссылка

https://d2mllj54g854r4.cloudfront.net/chinese_static/audio/alicia/ + bi + 4.mp3

Спасибо большое!

PS
На выходе получатся вот такие звуки, можете послушать
1
2
3
4